Hooks State不能及时更新问题

1 使用useState触发组件重新执行

import React, { useState, useReducer } from 'react';

const App = () => {
  const [arr, setArr] = useState([0]);
  const [, forceUpdate] = useState(0);

  const handleClick = () => {
    Promise.resolve()
      .then(() => {
        arr.push(1); // 如果这里也需要做一次渲染在改变状态后调用 forceUpdate() 即可
      })
      .then(() => {
        arr.push(2);
        forceUpdate((pre) => pre + 1);
      });
  };

  return (
    <>
      <h1>{arr.toString()}</h1>
      <button onClick={handleClick}>change</button>
    </>
  );
};

export default App;

上面arr可以理解成一个对象，两次修改这个对象，然后组件重新执行，那么渲染的就这个对象的最新的值。

arr是只读模式，也就只有它是对象的时候可以这样。