在其他更新开始之前状态更新未完成答案

【问题标题】：State update not finised before other update starts在其他更新开始之前状态更新未完成
【发布时间】：2020-08-19 06:24:43
【问题描述】：

我有这个对象：

{
  "Widget1": "notes",
  "Widget2": "clock",
  "Widget3": "weather",
}

它通过一个 REST API 传输到我的反应应用程序。

const Widgets: React.FC = () => {
  interface DataType {
    [key: string]: string;
  }

  const [data, setData] = React.useState<DataType>();

  const [isLoaded, setIsLoaded] = React.useState<boolean>(false);
  React.useEffect(() => {
    const fetchData = async () => {
      fetch("http://localhost:1202/data")
        .then((res) => res.json())
        .then((json) => {
          setData(json);
          console.log("json", json);
        });
    };
    fetchData();
    setIsLoaded(true);
  }, []);

  const [currentWidget1, setCurrentWidget1] = React.useState<string>("wetter");
  const widget1Handler = (widget: string) => {};

  if (!isLoaded) {
    return (
       <div>loading...<div>
    );
  } else {
    return (
       <component data={data}></component>
    );
  }
};
export default Widgets;

问题是显然setData 的更新时间比setIsLoaded 的更新时间要长。所以component是在数据存储到数据对象之前加载的。有没有快速解决办法？

【问题讨论】：

fetch 是异步的，因此其行之后的同步代码将立即执行，有时稍后，fetch 的承诺将解决（或拒绝）并且setData 将被调用.
也就是说，您可能只使用data 进行检查并删除isLoaded。 if (!data) return <div>loading...<div>;

标签： javascript reactjs async-await

【解决方案1】：

是的，你可以使用类似的东西

if (Object.keys(data) > 0) {
  <Component data={data}></Component>
}
else {
  <div>loading...<div>
}

无需使用isLoaded

仅供参考：React 组件总是以大写的第一个字符Component 调用

【讨论】：

Uncaught TypeError: Cannot convert undefined or null to object
在您的 useState 中，您可以使用默认值设置器。喜欢，const [data = {}, setData] = React.useState<DataType>();
或者你也可以使用类似下面的东西，if (data && Object.keys(data) > 0) ...

【解决方案2】：

你可以检查是否有数据然后设置状态：data && setData(json)

【讨论】：

当然你需要写另一个 useEffect 它有依赖 [data] 并把上面提到的逻辑放在那里......但是这种情况下的正确方法是删除你的加载状态并有条件地渲染 jsx有数据：返回！！数据？（您的数据页面）：（加载页面）