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

Question

I am creating a button column dynamically (in an editable table). My usecase is to show this button on selected rows.

    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}
    ...

When I print currData inside handleAddRow, it shows []. Issue: However when printed in render, currData has some value. Q: How can I make the callback function access state in Parent? Any other suggestions are also welcome.

Note: I am using react-table libary and all my coding uses hooks.

EDIT: As per suggestion, I used arrow function that solves partly. Here are issues: -

1. The callback arrow function cannot read the state variable when invoked first time upon button click. But is able to read 2nd time onwards.
2. The callback reads the copy of state variable (which controls the render ie controlled) during time of render from parent to child. But does not read latest value in state variable. However the state variable shows latest value which shows up in render.

Answer 1

The click event is not scoped to your component. Either bind this , or use an arrow function.

Binding:

onClick={handleAddRow.bind(this)}

Arrow function:

onClick={() => handleAddRow()}