如何用新数组更新React状态下的数组？

Question

      const [elements, setElements] = useState(unfilteredArray);

      useEffect(() => {
        const filteredArray = [];
        elements.map(elem => {
          if (filterTypes.includes(elem.type)) {
            filteredArray.push(elem);
          }
        });
        setElements([...filteredArray])
      }, [filterTypes]);

我正在尝试更新 React 状态下的数组。我知道您必须返回一个新数组并将其传递到状态的 setter 函数中 - 因为状态中的数组应被视为不可变。但是，对于我的具体情况，我还没有找到正确的方法。

上面的代码总是导致

elements

状态被设置为空数组而不是

filteredArray

。

我见过这种技术的使用：

setElements([...elements, element])

。但是，我的愿望是用新数组替换整个数组，而不是将新值附加到现有数组。

Answer 1

您需要使用

filter()

而不是

map()

，因为

map()

不直接过滤元素。

filter()

将返回一个新数组，您可以将其设置为状态。

const [elements, setElements] = useState([]);

useEffect(() => {
  setElements(unfilteredArray.filter(elem => filterTypes.includes(elem.type)));
}, [filterTypes]);