使用 useState 挂钩附加数组未按预期工作答案

【问题标题】：Appending array with useState hook not working as expected使用 useState 挂钩附加数组未按预期工作
【发布时间】：2020-05-28 14:38:10
【问题描述】：

我正在使用下面的代码，并希望我在使用“...”时会收到一个包含多个对象的数组。

const [csv, setCsv] = useState([]);

useEffect(() => {
    d3.csv(fileName, function(fileContents) { setCsv(
        [...csv,{
            'key': fileContents['Licenseno'],
            'First Name': fileContents['First Name'],
            'Address': fileContents['Street #'] + " " + fileContents['Stname'] + " " + fileContents['Suffix'] + " " + '0' + fileContents['Zip']
        }]);
    });
},[])

相反，console.log 显示 csv[] 正在为每个 fileName 行重写，并且一次只包含一个对象。

要查看这是否与 d3 相关（我以前从未使用过），我声明了一个 const arrayVar = [] 和 .appended - 这按我想要的方式工作。所以它似乎是 useState 钩子......关于如何解决这个问题的任何想法？

【问题讨论】：

标签： reactjs d3.js react-hooks react-state-management use-state

【解决方案1】：

使用setState 的另一种方式是传递一个函数。

// instead of
setCsv([...csv, { key: '...' });

// use this:
setCsv((currentState) => [ ...currentState, { key: '...' } ]);

当您将函数传递给 setState 时，当前状态将作为参数传递给该函数。这样您就不必将状态添加到您的 useEffect 依赖数组中。

您可以在React Docs找到更多信息。

【讨论】：