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

Posted 2023-02-19

【中文标题】反应渲染状态不是真实状态

【英文标题】：React render state not the real state

【发布时间】：2021-11-20 08:24:19

【问题描述】：

我尝试在一秒钟后将我的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;

snipaste

【参考方案1】：

你应该使用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;

【讨论】：

看来你没听懂我说的。你可以看看我的截图。你给出的代码是有效的，因为你使用了const newArray = [...newArray]。你创建了一个浅拷贝数组状态。但我不知道为什么开发工具中的状态与我在组件中返回的状态不兼容，这在我的截图中显示。