React 嵌套子组件回调函数无法读取父组件的状态（使用 Hooks）

Question

我正在动态创建一个按钮列（在一个可编辑的表格中）。 我的用例是在选定的行上显示此按钮。

    Component:
    const [currData, setCurrData] = useState([]);
    const [tableCols, setTableCols] = useState([]);

    useEffect:
    ...
        cols.forEach((item, index) => {
          if (item.accessor === 'addB') {
              cols[index].Cell = ({ cell }) => (
                (cell.row.index === lastRow) ? (
                <button id={cell.row.index} value={cell.row.usky} onClick={handleAddRow}>
                  Add Row
                </button>) : ''
              )
            }
          }
        );
        setTableCols (cols);

    ...
    useTable(
        {
            columns={tableCols}
            data={currData}
    ...

当我在 handleAddRow 中打印 currData 时，它显示 []。 问题：然而，当在渲染中打印时，currData 有一些价值。 Q：如何在Parent中设置回调函数的访问状态？ 也欢迎任何其他建议。

注意：我使用的是 react-table 库，我所有的编码都使用钩子。

编辑：根据建议，我使用了部分解决的箭头函数。 以下是问题：-

1. 回调箭头函数在按钮单击时第一次调用时无法读取状态变量。 但是能够从第二次开始阅读。
2. 回调在从父级到子级的渲染期间读取状态变量的副本（控制渲染即受控）。 但不读取状态变量中的最新值。 然而，状态变量显示在渲染中显示的最新值。

Answer 1

单击事件的范围不限于您的组件。 要么绑定this ，要么使用箭头函数。

捆绑：

onClick={handleAddRow.bind(this)}

箭头函数：

onClick={() => handleAddRow()}