Блог

Главная - Вопросы по программированию - setState файл CSV один раз возвращает значение null

setState файл CSV один раз возвращает значение null

#reactjs #csv #d3.js #use-effect

#reactjs #csv #d3.js #использование-эффект

Вопрос:

мне нужно прочитать из файла csv с помощью d3 и сохранить результат в переменной состояния. Я разделил инициализацию в перехватчике useEffect, но когда я пытаюсь использовать переменную состояния после того, как она возвращает null:

 const ItalyMapRegion = ({ w, h, onChangeRegion }) => {

  const [zone, setZone] = useState(null);

  useEffect(() => {
    console.log("once");
    d3.csv(data).then(function (data) {
      setZone(data);
    });
  }, []);

  useEffect(() => {
    console.log(zone); //this return null, why?
        ......

Что я делаю не так?

Ответ №1:

Поскольку операция, выполненная в первом useEffect , является асинхронной. Попробуйте добавить zone переменную в качестве зависимости ко второму useEffect и проверьте, есть ли она там:

 const ItalyMapRegion = ({ w, h, onChangeRegion }) => {

  const [zone, setZone] = useState(null);

  useEffect(() => {
    console.log("once");
    d3.csv(data).then(function (data) {
      setZone(data);
    });
  }, []);

  useEffect(() => {
    if (zone) {
      console.log(zone);
    }
  }, [zone]);

Комментарии:

1. хорошо, но если я сделаю это, второе использование повлияет на его выполнение дважды. Есть ли возможность запустить также второй useEffect только один раз?

2. Второй useEffect должен выполняться дважды: при первоначальном отображении, когда zone переменная есть null , и во второй раз, когда она изменяется после того, как вы установили data для нее значение. Он не может быть запущен один раз. Возможно, вам следует немного реструктурировать свое приложение, например, переместить выборку данных за пределы компонента, на самом деле это зависит от того, что вам нужно сделать. У нас не так много информации об этом.

3. Да, я думаю, мне нужно провести небольшой рефакторинг, спасибо!