React hooks - 将数组重新初始化为空答案

【问题标题】：React hooks -to reinitialise array to emptyReact hooks - 将数组重新初始化为空
【发布时间】：2020-07-29 08:09:50
【问题描述】：

我确实有一个州写成

const[checkboxIds,setCheckboxIds]=useState([])

我有一个 useEffect


useEffect(()=>{
    if (!isEmpty(currentData)) {
      currentData.forEach(id => {
        checkboxIds.push(id);
      });
      setCheckboxIds(checkboxIds);
    }
},[currentData])

我将计数显示为 {checkboxIds} 并且显示正确

我再次有 4 个标签，如字母、颜色、动物和汽车，当我点击每个标签时 当前数据 会发生变化，因此 checkboxIds 计数也应该发生变化。它在变化，但它也在增加先前的计数

例如，如果我在字母表中有 10 个对象，它在初始页面加载时显示计数为 10，当我单击颜色时（它有 5 个对象），它显示计数为 15（它应该只显示 5 个）和当我点击动物（它有 10 个对象）时，它显示计数为 25（它应该显示它的计数为 10）

所以我知道应该重新启动 setCheckboxIds，但对我来说它不起作用

【问题讨论】：

checkboxIds.push(id); 假设 checkboxIds 的状态是什么？其中属性selectedCheckboxIds 被初始化。我没看到。
请提供更多上下文。所有这些变量是从哪里来的？
@Sandy 这是一个拼写错误，我已经改正了
@bbortt 它是一个对象数组，每个对象都包含 id。我只是将 id 隔离到另一个数组
啊，我认为您正在复制数组的旧值，然后在useEffect 中。您必须先初始化一个空数组，然后将push 初始化为这个数组。这可能就是它增加的原因。

标签： reactjs react-hooks react-functional-component

【解决方案1】：

我认为你需要将你的 useEffect 更新为

useEffect(()=>{
    if (!isEmpty(currentData)) {
      const updatedCheckboxIds = [];
      currentData.forEach(id => {
        updatedCheckboxIds.push(id);
      });
      setCheckboxIds(updatedCheckboxIds);
    }
},[currentData])

这种方式在每个效果上都会创建一个新的 checkboxIds 数组并将 ids 推入其中。

【讨论】：

或setCheckboxIds([...currentData])