反应 |等到 useEffect 完成答案

【问题标题】：React | wait until useEffect is finished反应 |等到 useEffect 完成
【发布时间】：2022-12-07 22:35:15
【问题描述】：

const Mob = () => {

  
  const [antDataColumns, setAntDataColumns] = useState([]);
  const urlAntColumns = "API_URL.com/test";


  useEffect(() => {
    fetch(urlAntColumns)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setAntDataColumns(data);
      });
  }, []);

console.log("X")

在获取完成之前，我如何等待并且不打印（“X”）？ “等待”可能是我可以使用的功能吗？

我之所以要这样做，是因为我使用的是 Material UI 中的 DataGrid

return (
      <div style={{ height: 1000, width: '100%' }}>
  <DataGrid
    rows={rows_test_data}
    columns={columns_test_data}
    pageSize={10}
    rowsPerPageOptions={[10]}
    checkboxSelection
  />
</div>
    )

这只有在变量已经定义的情况下才有效......所以我必须等到查询完成。

【问题讨论】：

标签： javascript reactjs jsx

【解决方案1】：

你正在以错误的方式思考这个问题。如果您有希望在异步操作完成后执行的逻辑，那么您可以将该逻辑放在该操作的后续操作中，而不是试图以某种方式强制一切等待。

例如，这是您的操作已经fetch 完成后执行：

setAntDataColumns(data);

如果你也想表演这个fetch完成后的操作：

console.log("X");

然后你会把它放在同一个地方，原因完全相同：

.then((data) => {
  setAntDataColumns(data);
  console.log("X");
});

【讨论】：

【解决方案2】：

您可以根据您所在州的条件停止组件呈现其内容。

  const [antDataColumns, setAntDataColumns] = useState([]);

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

if (!antDataColumns.length) return null;

console.log("X")

或者您可以创建第二个状态：加载状态，在处理请求时为 true，在完成时为 false。

【讨论】：