как изменить булеву логику в обьекте react

Question

const [data, setData] = useState(AccordionData)

const AccordionItems = data.map((item) => {

    const OpenClose = (id) => {

        if (id === item.id) {
            setData(data => ([{
                ...data,
                open: true
            }]))

        } else {
            setData(data => ([{
                ...data,
                open: false
            }]))
        }
    }

    return <AccordionItem 
    item={item} 
    key={item.id} 
    OpenClose={OpenClose} 
    id={item.id}
    open={item.open}
    />
})

когда я запускаю функцию все элементы сбрасываются и остаётся только один элемент без текста

Answer 1

Terra, твою задумку можно реализовать вот таким способом...

//
const Itm = React.memo(({obj, oc}) => {
  const act = _ => {
    oc(old => old.map(o => o.id === obj.id 
      ? {...o, open: !o.open}
      : o
    ))
  }
  return <li onClick={act}>
    <p>{obj.title}</p>
    {obj.open ? <p>{obj.body}</p> : null}
  </li>
})
//
function App() {
  const [data, setData] = React.useState([])
  React.useEffect(_ => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => res.json())
      .then(res => setData(res))
      .catch(console.log)
  }, []) 
  return <ul>
    {data.map(o => <Itm key={o.id} obj={o} oc={setData} />)}
  </ul>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

как изменить булеву логику в обьекте react

Ответы (1 шт):