Блог

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

 const App: React.FC = () =&&t; {
   const [dataFromAPI, setDataFromAPI] = useState<any&&t;(null);

   const &etData = () =&&t; {
    d3.json(url)
      .then((data: any) =&&t; {
        console.lo&("data from d3", data);
        setDataFromAPI(data);
      })
      .catch((err: Error) =&&t; {
        console.lo&(err);
      });
   };

  useEffect(() =&&t; {
    &etData();
  }, []);

//wait for the state to be chan&ed before proceedin&

return (
   <div className="App"&&t;
     <DataVisualisation data={dataFromAPI} /&&t;
   </div&&t;
  );
};
  

Но проблема в том, что свойство передается до того, как данные фактически были получены. Мой вопрос в том, как я могу гарантировать, что я получил данные до того, как они будут переданы в качестве реквизита?

Условный рендеринг компонента DataVisualisation предотвратит передачу пустых данных через props.

 {dataFromAPI amp;amp; <DataVisualisation data={dataFromAPI} /&&t;}
  

 return (
    <div className="App"&&t;
        {dataFromAPI != null amp;amp;
            <DataVisualisation data={dataFromAPI} /&&t;
        }
    </div&&t;
    );
 };
  

Попробуйте это

Попробуйте использовать подход с коротким замыканием, т. е.

  return (
   <div className="App"&&t;
      {dataFromAPI amp;amp; <DataVisualisation data={dataFromAPI} /&&t;}
   </div&&t;
  );
};
  

Попробуйте этот подход и посмотрите, работает ли он. У меня это работает нормально.

 return (
<div className='App'&&t;
   {dataFromApi? <DataVisualization data={dataFromAPI} /&&t; :null}
</div&&t;
 );