IT技术 - ReactJS 父子引用已过时的子状态 - 吾爱随笔录

我正在使用useRef()从我的父组件调用子函数。问题是betHistory每当父级调用子级undo函数时，子级状态 ( ) 都是空的，但是当undo()子级本身调用时，状态是最新的（填充了所有已推送给它的值）。为什么我的父母看到一个空版本的betHistorywhen 调用undo()vs whenundo()被孩子自己调用？

家长

import './App.css';
import Table from './Table';
import React, { useEffect, useState, useRef } from 'react';

function App() {
  const table = useRef();

  function undo() {
    table.current.undo();
  }

  return (
    <div className="App">
      <div className="table-section">
        <Table ref={table}></Table>
      </div>
      <div className="button" onClick={undo}>Click me</div>
    </div>
  );
}

export default App;

孩子

import React, { useState, forwardRef, useImperativeHandle } from 'react';
import './Table.css';

function Table(props, ref) {

  const [betHistory, setBetHistory] = useState([]);
  const [betCount, setBetCount] = useState(0);


  function placeBet(element) {
    const newBetHistory = [...betHistory, betCount.toString()];
    setBetHistory(newBetHistory);
    setBetCount((1 + betCount));
  }

  function undo() {
    console.log(betHistory);
  }

  useImperativeHandle(ref, () => ({
    undo() {
      undo();
    }
  }), [])

  return (
    <div className="button" onClick={undo}>Click me</div>
    <div className="bet-button" onClick={placeBet}></div>
  );
}

export default forwardRef(Table)