javascript - 使用 useState() 设置道具时未重新渲染子项

问题描述

我有一种情况，我有父 ( 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>
  );
};

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

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

我无法理解的是，为什么使用useState修改columns值会阻止在值更改customBodyRender时触发指定的函数buttonsDisabled，而通过简单的赋值设置它就可以了。毕竟在这两种情况下，它仍然是对同一个数组的引用。我相信这是我缺少的一些简单概念，但我希望能帮助您指出那是什么。

标签： javascriptreactjsecmascript-6mui-datatable

当您创建初始columns状态时，您的customBodyRender函数可以访问外部函数的buttonsDisabled变量（请参阅：closure），该变量默认为false. 一旦初始化，你的columns变量就会存储在你的状态中，并且buttonsDisabled里面的变量customBodyRender会继续从外部函数中引用原始值。

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

customBodyRender: (v, disabled) => (
  <button disabled={disabled}>button</button>
)

javascript - 使用 useState() 设置道具时未重新渲染子项

问题描述

解决方案

推荐阅读