带有useState挂钩的附加数组未按预期工作

Question

我正在使用以下代码，并希望我将在使用“ ...”时收到多个对象的数组。

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 = []和.append-这是我想要的方式。似乎是useState钩子...关于如何解决此问题的任何想法？

Answer 1

使用catchError的另一种方法是传递一个函数。

setState

将函数传递给setState时，当前状态将作为参数传递给该函数。这样，您不必将状态添加到// instead of setCsv([...csv, { key: '...' }); // use this: setCsv((currentState) => [ ...currentState, { key: '...' } ]); 依赖项数组中。

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