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具有一定的价值。问：如何在Parent中设置回调函数的访问状态？也欢迎其他任何建议。

注意：我正在使用react-table库，所有代码都使用钩子。

编辑：根据建议，我使用了部分解决的箭头功能。这里是问题：-

在以下情况下，回调箭头函数无法读取状态变量单击按钮时首次调用。但是能够第二次阅读开始。
回调在父对象到子对象的渲染期间读取状态变量的副本（该变量控制渲染，即受控）。但是不会读取状态变量中的最新值。但是状态变量显示最新值，该值显示在渲染器中。

Answer 1

click事件不限于您的组件。绑定this，或使用箭头功能。

绑定：

onClick={handleAddRow.bind(this)}

箭头功能：

onClick={() => handleAddRow()}

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

1 个答案: