通过父组件将数组从一个组件传递到另一个组件，但它在第一次渲染时不起作用

Question

所以我有一个数组，我需要通过父组件从一个组件传递到另一个组件。

父:

const [arr, setArr] = useState([]);
<Component1 setArrFunction={setArr}/>
<Component2 myArr={arr}

Component1:(数组来自于此组件)

Component_1({setArrFunction })
useEffect(() => {
setArrFunction(elRefs);
}, [elRefs]);

elRefs是我的数组，它包含了我需要的元素的refs，但这不是这里的问题

于Component2

Component_2({ myArr })
useEffect(() => {
window.addEventListener('scroll', myFunc);
return () => {
window.removeEventListener('scroll', myFunc);
};
}, []);

在component_2中，我有这个在滚动上运行的函数，它为我的数组运行forEach。问题是，在第一次渲染这个数组是空的，这发生在我控制台日志我的数组在Component_2

[]
[]
(6) [{…}, {…}, {…}, {…}, {…}, {…}]
(6) [{…}, {…}, {…}, {…}, {…}, {…}]

所以我的数组在技术上是空的，我的forEach不起作用。有什么办法可以补救吗?

Answer 1

这是因为useEffect组件将在component1中完成渲染方法后运行，同时component2被渲染，useEffect被myArr which has empty value调用，此时您将eventListener与emptyValue附加在一起。几分钟后，myArr已设置，但您不再使用它。

这就是原因，解决方案是您需要将myArr添加到useEffect依赖并检查其值，如下所示:

useEffect(() => {
if (myArr.length) {
window.addEventListener("scroll", myFunc);
return () => {
window.removeEventListener("scroll", myFunc);
};
}
}, [myArr]);