Добавление массива с хуком 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 = [] и .appended - это сработало так, как я хотел. Так что это похоже на хук useState ... есть идеи, как решить эту проблему?

Answer 1

Другой способ использования setState - передача функции.

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

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

Когда вы передаете функцию в setState, текущее состояние будет передано в качестве аргумента этой функции. Таким образом, вам не нужно добавлять состояние в массив зависимостей useEffect.

Дополнительную информацию можно найти в React Docs .