时间戳

首页 > 解决方案 > 反应渲染状态不是真实状态

reactjs - 反应渲染状态不是真实状态

问题描述

我尝试在一秒钟后将我的arr加载设置为false。但是html中的渲染功能似乎与react dev工具中的状态不一样。这是代码和截图。

import { useEffect, useState } from 'react';

const App = (p: any) => {
  console.log('render!!');
  const [arr, setArr] = useState([{}, {}, {}, {}]);

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

  const changeArr = async () => {
    const localArr = JSON.parse(JSON.stringify(arr));
    for (let i = 0; i < 4; i++) {
      const p = new Promise(res => {
        setTimeout(() => {
          res('');
        }, 1000);
      });
      const res = await p;
      localArr[i].loading = false;
      setArr(localArr);
    }
  };

  return (
    <>
      <div>{JSON.stringify(arr)}</div>
    </>
  );
};

export default App;

截图

标签： reactjsasynchronousasync-awaitpromise

解决方案

您应该使用then来获得承诺的结果

import { useEffect, useState } from "react";

const App = () => {
  const [array, setArray] = useState([{}, {}, {}, {}]);

  useEffect(() => {
    changeArray();
  }, []);
  function myPromise() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("");
      }, 1000);
    });
  }

  async function changeArray() {
    JSON.parse(JSON.stringify(array));
    for (let i = 0; i < 4; i++) {
      await myPromise().then(() => {
        const newArray = [...array];
        newArray[i].loading = false;
        setArray(newArray);
      });
    }
  }

  return (
    <>
      <div>{JSON.stringify(array)}</div>
    </>
  );
};

export default App;

推荐阅读