将React组件数组传递给useState返回空数组

Question

这里的代码很简单。我想知道这是否是预期的结果。我正在升级npm模块，它要求我将这些项目传递给useState，而以前这是不必要的。不幸的是，我想useState无法做到这一点？我对吗？我想错了。

---

props.items包含一个基于类的React组件数组，useState返回一个空数组：

const [items, set] = useState(props.items);

输入：

输出：

*请注意，图像使用了在数组内部散布的道具，因为除了构想之外，我一无所有。

Answer 1

实际上并没有建议您最好在useEffect中这样做，因为处于初始状态的Props是anti-pattern。

const [items, setItems] = useState([]);


useEffect(() => {
    setItems(props.items);
  },[props.items]);

Answer 2

使用react元素数组作为useState的输入应该没有问题。但是，每当使用来自父母的道具初始化状​​态时，一旦父母的道具发生更改，您还需要重新更新状态。否则，它将指向在第一遍中从父级传递过来的旧状态。这样做的方法是使用useEffect钩子设置setItems

useEffect(() => {
   setItems(props.items)
}, [props.items])

btw这只会检查新旧数组之间的引用相等性，如果您想进行深度比较，则可能应该使用类似use-deep-compare-effect