Question

我的情况是我有父母（App）和孩子（MUIDatatable）组件。子级是一个数据表，它接受columns道具，该道具描述列结构以及为其中之一定义自定义渲染功能。在此自定义渲染功能中，我创建了一个按钮实例，其disabled状态应取决于父对象的状态，取决于通过buttonsDisabled钩子设置的useState()值。到目前为止，它仍然可以正常工作，但是当我还使用columns更改useState()道具时，更改buttonsDisabled值时，重新渲染不再触发。代码如下：

  const App = () => {
  const [buttonsDisabled, setButtonsDisabled] = useState(false);

  const tableData = {
    columns: [
      { name: "name", label: "Name", options: {} },
      {
        name: "action",
        label: "Action",
        options: {
          customBodyRender: v => (
            <button disabled={buttonsDisabled}>button</button>
          )
        }
      }
    ],
    data: [["A", null], ["B", null], ["C", null], ["D", null]]
  };

  const btnOnClick = () => {
    setButtonsDisabled(true);
  };

  /***** discussed part of code *****/
  const [columns] = useState(tableData.columns); // if we use this, buttons are not disabled
  //const columns = tableData.columns; // if we use this, buttons are properly disabled
  /**********************************/

  return (
    <div>
      <button onClick={btnOnClick}>DISABLE BUTTONS</button>
      <MUIDataTable title="title" data={tableData.data} columns={columns} />
    </div>
  );
};

它也可以在codeandbox上找到： https://codesandbox.io/s/muidatatables-custom-toolbar-cy4vg

我准备的代码是原始代码的简化版本，因此可能没有多大意义，但它将代码限制在最低限度，只是为了重现问题。

我不明白的是为什么使用useState来修改columns的值为什么会阻止更改customBodyRender的值时触发指定的buttonsDisabled函数，而设置通过简单的分配就可以了。在两种情况下，它毕竟仍然是对同一数组的引用。我相信这是我所缺少的一些简单概念，但是我希望在指出那是什么方面有所帮助。

Answer 1

在创建初始columns状态时，您的customBodyRender函数可以访问外部函数的buttonsDisabled变量（请参见：closure），默认为{{ 1}}。初始化后，您的false变量将以您的状态存储，并且columns内部的buttonsDisabled变量将继续引用外部函数的原始值。

您是否可以改为将customBodyRender传递到buttonsDisabled表组件中，并可能将其作为参数传递给MUIDataTable函数？

customBodyRender

使用useState（）

1 个答案: