ReactJS useState hook 实际值在异步承诺中已过时

Question

在我的反应函数组件中，我发送多个服务器请求并通过异步承诺更新状态挂钩值，方法是将服务器结果附加到状态最新值，但是一旦创建承诺，状态挂钩的值不会在运行的承诺内更新，因此如果另一个Promise 更新状态值，其他正在运行的 Promise 不会收到通知，因此它们使用旧版本的状态来进行进一步的状态更新。下面的代码是我的组件的简化版本，我希望在多个 Promise 运行且状态更新时，从每个 Promise 的第 19 行控制台日志中看到相同（且最新）的值。function App() {  const [myArray, setMyArray] = useState([0,1,2])  const sleep = (ms:number) => {    return new Promise(resolve => setTimeout(resolve, ms));  }  const updateArray = () => {    setMyArray([...myArray, myArray.length])  }  const firePromise = () => {    new Promise(async (resolve) => {      const timeStamp = new Date().getTime()      let repeatTime = 0      while(repeatTime < 12){        console.log("array: ", myArray, "promiseIdenifier: ", timeStamp);        repeatTime += 1        await sleep(1000)      }      resolve({timeStamp, myArray})    }).then(val => {      console.log("resolved: ", val);          }).catch(err => {      console.log("rejected: ", err);          })  }  return (    <div className="App">      <button onClick={firePromise}>new promise</button>      <button onClick={updateArray}>updateArray</button>    </div>  );}export default App;  

Answer 1

一旦 React 组件被渲染，就可以假设组件的当前“状态”像快照一样存在。

console.log 中的“myArray”是创建 firePromise 时的“myArray”。所以保留第一个值是正确的。（每次渲染组件时，都会创建一个新的 firePromise。）

有一种方法。第一个是使用 ref，第二个是使用 setState。

第一的

function App() {

  const myArray = useRef<Array<number>>([0, 1, 2]);

  const sleep = (ms: number) => {

    return new Promise((resolve) => setTimeout(resolve, ms));

  };

  const updateArray = () => {

    myArray.current.push(myArray.current.length);

  };

  const firePromise = () => {

    new Promise(async (resolve) => {

      const timeStamp = new Date().getTime();

      let repeatTime = 0;

      while (repeatTime < 12) {

        console.log(

          "array: ",

          myArray.current,

          "promiseIdenifier: ",

          timeStamp

        );

        repeatTime += 1;

        await sleep(1000);

      }

      resolve({ timeStamp, myArray: myArray.current });

    })

      .then((val) => {

        console.log("resolved: ", val);

      })

      .catch((err) => {

        console.log("rejected: ", err);

      });

  };

  return (

    <div className="App">

      <button onClick={firePromise}>new promise</button>

      <button onClick={updateArray}>updateArray</button>

    </div>

  );

}

export default App;

第二

function App() {

  const [myArray, setMyArray] = useState([0, 1, 2]);

  const sleep = (ms: number) => {

    return new Promise((resolve) => setTimeout(resolve, ms));

  };

  const updateArray = () => {

    setMyArray([...myArray, myArray.length]);

  };

  const firePromise = () => {

    new Promise(async (resolve) => {

      const timeStamp = new Date().getTime();

      let repeatTime = 0;

      while (repeatTime < 12) {

        setMyArray((prevMyArray) => {

          console.log("array: ", prevMyArray, "promiseIdenifier: ", timeStamp);

          return prevMyArray;

        });

        repeatTime += 1;

        await sleep(1000);

      }

      setMyArray((prevMyArray) => {

        resolve({ timeStamp, prevMyArray });

        return prevMyArray;

      });

    })

      .then((val) => {

        console.log("resolved: ", val);

      })

      .catch((err) => {

        console.log("rejected: ", err);

      });

  };

  return (

    <div className="App">

      <button onClick={firePromise}>new promise</button>

      <button onClick={updateArray}>updateArray</button>

    </div>

  );

}

export default App;

将回调传递给 setState 函数时，当前状态将作为第一个参数传递。这是使用这个的快捷方式。

建议使用当值改变时视图应该改变的值作为状态。更改“myArray”不会影响视图，因此使用 ref 是正确的方法。