useEffect не вызывается и не обновляет состояние при получении api

Сообщение об ошибке выдает это Cannot read property 'current' of null, единственное место, где вызывается current, находится в weather.current в src из Card.Img, поэтому мы делаем вывод, что weather было null во время рендеринга.

Причина, по которой это происходит, заключается в том, что вызов api является асинхронным, он не заполняет состояние сразу, поэтому сначала выполняется рендеринг и пытается прочитать .current из начального состояния погоды null.

Решение: в вашем render методе убедитесь, что не читаете weather.current, пока weather равно null.

Вы можете, например, использовать {weather && <Card>...</Card}, чтобы скрыть всю карточку, пока данные не будут загружены и не покажет индикатор загрузки, или вы можете использовать src={weather && weather.current.condition.icon} в качестве быстрого обходного пути.

const Weather = ({capital}) => {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    console.log("useEffect called");
    const getWeather = async () => {
      try {
        const res = await axios.get(
          `http://api.apixu.com/v1/current.json?key=53d601eb03d1412c9c004840192807&q=${capital}`,
        );
        setWeather(res.data);
      } catch (e) {
        console.log(e);
      }
    };
    getWeather();
  }, [capital]);
  console.log(weather);

  return (
    <Card style={{width: "18rem", marginTop: "25px"}}>
      <Card.Img variant="top" src={weather && weather.current.condition.icon} />

      <Card.Header style={{textAlign: "center", fontSize: "25px"}}>
        Weather in {capital}
      </Card.Header>
    </Card>
  );
};

Итак, я столкнулся с аналогичной проблемой, когда казалось, что хук useEffect вообще не вызывается. Соответствующий фрагмент кода приведен ниже:

В моем функциональном компоненте это была последовательность появления кода:

• объявление переменной const facetFields = [];, которое должно было быть установлено вызовом AJAX из useEffect хука

• useEffect, в котором указанная выше переменная была установлена ​​с помощью AJAX.

   useEffect( ()=>{
        console.log('FacetTreeView: useEffect entered');
        facetFields = getFacetFieldNames(props.tabIndex);   
     }, []);
  

• # P5 #

  # P6 #

С этим кодом консольный оператор внутри ловушки вообще не печатался. Кроме того, я продолжал получать неопределенную ошибку, когда map обрабатывал facetFields. Итак, оказывается, что useHook вызывается после рендеринга компонента. Итак, во время рендеринга переменная facetFields равна undefined. Итак, я исправил это, добавив эту строку в свою часть кода рендеринга JSX:

facetFields && facetFields.map(.....

После того, как я внес вышеупомянутое изменение, элемент управления начал переходить к ловушке. Итак, в итоге, если в JSX есть какой-либо код, который устанавливается из ловушки useEffect, то лучше всего отложить выполнение JSX до тех пор, пока выполнение ловушки не будет завершенный. Хотя это не обязательно, но это упростит чтение кода JSX. Этого можно достичь простым способом, используя флаг логического состояния.

1. Определите состояние:

const [readyForRender, setReadyForRender] = React.useState (ложь); 2. Установить состояние в хуке.

useEffect( ()=>{
            console.log('FacetTreeView: useEffect entered');
            facetFields = getFacetFieldNames(props.tabIndex);
            setReadyForRender(true); }, []);

3. Рендеринг JSX условно.

if (readyForRender) {return ({facetFields.map ((facetLabel, index) = ›{populateFacetInstances (facetLabel)})}); } else {return null; }

Однажды у меня была такая же загадочная проблема

Вы можете попробовать добавить ключевую опору в компонент, когда он создается в родительском коде.

<yourcomponent key="some_unique_value" />

Это связано с тем, что в большинстве случаев, когда ваш компонент повторно используется, в зависимости от способа его создания, он обычно может повторно отрисовать его с некоторыми изменениями вместо того, чтобы создавать его снова, когда вы повторно используете его. Следовательно, useEffect не будет вызываться . например, в SwitchRoute, циклах, условных выражениях ...

Таким образом, добавление ключа предотвратит это. Если он находится в цикле, вам нужно убедиться, что каждый элемент уникален, возможно, включив индекс i в ключ, если вы не можете найти лучший уникальный ключ.