当 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>
   );
  };