由于props.history.push是异步的，因此使用setState忽略setState时会出现React问题

Question

我这里有两个路由Home和Result。Home监视它的两个状态id和count。在Home内部有一个嵌套的组件Page，它有一个状态check并呈现一个按钮。点击按钮会触发事件: 1)如果check为真，则递增count；2)如果id < 3，则递增id，否则将count传递给不同的路由Result (props.history.push)。

为了简化本例中的问题，我将check设置为true。由于id从0开始，所以当路由更改时，count应该是3，但我这里只有2。我尝试同步调用setState以在将count传递给Result之前先递增它，但是props.history.push忽略了setState并执行它自己。

处理这种或类似情况(不修改组件或状态层次结构)的最佳实践是什么？请在下面找到示例代码和屏幕截图。

App.js

<BrowserRouter>
  <Switch>
    <Route path="/home" component={Home} />
    <Route path="/result" component={Result} />
    <Redirect from="/" to="/home" />
  </Switch>
</BrowserRouter>;

Home.js

const Home = (props) => {
  const [id, setId] = useState(0);
  const [count, setCount] = useState(0);

  const handleCount = () => {
    setCount(count + 1);
  };

  const handleNextId = () => {
    if (id >= 3) {
      props.history.push({
        pathname: "/result",
        state: { count: count },
      });
    } else {
      setId(id + 1);
    }
  };

  return (
    <div>
      <div>id: {id}</div>
      <div>count: {count}</div>
      <br />
      <Page count={handleCount} nextId={handleNextId} />
    </div>
  );
};

export default Home;

Page.js

const Page = (props) => {
  const [check, setCheck] = useState(true);

  const handleCheck = () => {
    if (check) {
      props.count();
    }
    props.nextId();
  };

  return (
    <button type="text" onClick={handleCheck}>
      next
    </button>
  );
};

export default Page;

​

​

Answer 1

好了，我想出了一种方法，通过将props.history.push移动到useEffect来监控id的变化。不确定这是否是最佳实践。请让我知道。

Home.js

const Home = (props) => {
  const [id, setId] = useState(0);
  const [count, setCount] = useState(0);

  useEffect(() => {
    if (id >= 3) {
      props.history.push({
        pathname: "/result",
        state: { count: count },
      });
    }
  }, [id]);

  const handleCount = () => {
    setCount(count + 1);
  };

  const handleNextId = () => {
    setId(id + 1);
  };

  return (
    <div>
      <div>id: {id}</div>
      <div>count: {count}</div>
      <br />
      <Page count={handleCount} nextId={handleNextId} />
    </div>
  );
};

export default Home;

​

​

Answer 2

如果您想获取当前值以传递给历史：

let currentCount;
setCount(current => {
   currentCount = current;
   return current;
});
props.history.push({
        pathname: "/result",
        state: { count: currentCount },
      });

此外，您还需要递增当前值：

setCount(current => current + 1);

id也有同样的想法。