當 props 改變時，React 功能組件子不會重新渲染

Question

我將一個對象數組作為道具傳遞給一個孩子，我希望孩子組件在數組發生變化時重新渲染，但它沒有：

家長：

export default function App() {
  const [items, setItems] = useState([]);

  const buttonCallback = () => {
    setItems([...items, { text: "new item" }]);
  };
  return (
    <div className="App">
      <h1>Items list should update when I add item</h1>
      <button onClick={buttonCallback}>Add Item</button>
      <Items />
    </div>
  );
}

孩子：

const Items = ({ itemlist = [] }) => {
  useEffect(() => {
    console.log("Items changed!"); // This gets called, so the props is changing
  }, [itemlist]);
  return (
    <div className="items-column">
      {itemlist?.length
        ? itemlist.map((item, i) => <Item key={i} text={item.text + i} />)
        : "No items"}
      <br />
      {`Itemlist size: ${itemlist.length}`}
    </div>
  );
};

我發現這個問題有同樣的問題，但它適用於 class 組件，因此該解決方案不適用於我的情況。

沙盒演示

Answer 1

  <Items propsname={data} />

Answer 2

const buttonCallback = () => {
    setItems([...items, { text: "new item" }]);
  };

但你應該把它寫成：

const buttonCallback = () => {
    setItems([...items, { text: "new item", id: Date.now() }]);
  };

因為不推薦使用 index 作為 react children 的 key。 相反，您可以使用 function 的實際日期。 這是 React 知道孩子發生變化的關鍵。

itemlist.map((item) => <Item key={item.id} text={item.text} />)

Answer 3

試試下面：你正在添加數組作為依賴項，要識別變量的變化，你應該做深拷貝或任何其他會告訴 useEffect obj 真的不同的事情。 `

 const Items = ({ itemlist = [] }) => {
  const [someState,someState]=useState(itemlist);
  useEffect(() => {
    someState(itemlist)
  }, [JSON.stringify(itemlist)]);
  return (
    <div className="items-column">
     {someState?.length
      ? someState.map((item, i) => <Item key={i} text={item.text 
       + i}  
           
    />)
    : "No items"}
    <br />
     {`Itemlist size: ${someState.length}`}
   </div>
   );
  };