Обновление состояния не завершено до запуска другого обновления

Question

У меня есть этот объект:

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

Он передается моему приложению реакции через 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 загружается перед сохранением данных в объекте данных. Есть ли быстрое решение для этого?

Answer 1

Вы можете проверить, есть ли данные, затем установить состояние: data && setData (json)

Answer 2

Да, вы можете использовать что-то вроде

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

Нет необходимости использовать isLoaded

Примечание: компоненты реагирования всегда вызываются с первым символом в верхнем регистре Component