在 React 動態創建的元素中更改 state

Question

假設我有這個組件代碼：

import * as React from 'react'

export default function App() {
  const [value, setValue] = React.useState('default');
  const defaultPanes = new Array(1).fill(null).map((_, index) => {
    const id = String(index + 1);
    return {
      label: `Some label`,
      children: (
        <div>
          Child {id}, value: {value}
        </div>
      ),
      key: id,
    };
  });
  const [items, setItems] = React.useState(defaultPanes);
  console.log(items, value);

  return (
    <div>
      <h1>{items[0].label}</h1>
      <div>{items[0].children}</div>
      <p onClick={() => setValue('new value')}>Klick me</p>
    </div>
  );
}

如何更改此動態呈現的元素“defaultPanes”中的 state {值}？

在 Stackblitz 中鏈接到此代碼

Answer 1

您的items數組不應該是 state 值，相反，您應該只使用defaultPanes /一個常規變量。 JSX 不應該是 state 的一部分，正是因為你所展示的原因。 State 值僅在明確告知通過 state setter setItems （在您的情況下為 setItems ）進行更新時更新，而不是在 state 中使用的值更改時更新。 如果您發現自己有state，它依賴於其他882744437401188值或道具，則不使用8827444437401188 SETETER function，或者在8827444401188，您是否應該在882744401188中包括8888，您是否應該在882744488中進行。 相反，我建議在value更改時使用useMemo()創建items數組：

 function App() { const [value, setValue] = React.useState('default'); const items = React.useMemo(() => new Array(1).fill(null).map((_, index) => { const id = String(index + 1); return { label: `Some label`, children: ( <div> Child {id}, value: {value} </div> ), key: id, }; }), [value]); return ( <div> <h1>{items[0].label}</h1> <div>{items[0].children}</div> <p onClick={() => setValue('new value')}>Click me</p> </div> ); } ReactDOM.createRoot(document.body).render(<App />);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>