主页 / 问题 / 1598453
Accepted
Terra
Asked:2024-11-01 13:06:58 +0000 UTC2024-11-01 13:06:58 +0000 UTC

如何更改反应对象中的布尔逻辑

  • 772
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}
    />
})

当我运行该函数时，所有元素都会重置，只有一个元素保留为无文本

javascript

1 个回答

  1. Best Answer

    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>

    • 1

相关问题