Reactjs 如何保证在继续之前已从api接收到数据？

我有一个简单的react应用程序，看起来像这样

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

   const getData = () => {
    d3.json(url)
      .then((data: any) => {
        console.log("data from d3", data);
        setDataFromAPI(data);
      })
      .catch((err: Error) => {
        console.log(err);
      });
   };

  useEffect(() => {
    getData();
  }, []);

//wait for the state to be changed before proceeding

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

const-App:React.FC=（）=>{
const[dataFromAPI，setDataFromAPI]=useState（null）；
常量getData=（）=>{
d3.json（url）
。然后（（数据：任意）=>{
console.log（“来自d3的数据”，数据）；
setDataFromAPI（数据）；
})
.catch（（错误：Error）=>{
控制台日志（err）；
});
};
useffect（（）=>{
getData（）；
}, []);
//等待状态更改后再继续
返回(
);
};

但问题是，该属性在实际接收数据之前就被传递了。我的问题是，如何保证在数据作为道具传递之前已收到数据？

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

{dataFromAPI！=null&&
}
);
};

---

试试这个

试试使用短路方法，即

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

返回(
{dataFromAPI&&}
);
};

试试这种方法，看看是否有效。 对我来说很好。

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

返回(
{dataFromApi？：null}
);

有条件地呈现组件

数据可视化

将防止空数据通过道具

{dataFromAPI && <DataVisualisation data={dataFromAPI} />}

{dataFromAPI&&}

Idk，它似乎对我不起作用。Program现在没有崩溃，但我没有得到数据的可视化。