使用 useState() 設置 prop 時，子項不會重新渲染

Question

我有一種情況，我有父 ( App ) 和子 ( MUIDatatable ) 組件。 子項是一個數據columns ，它接受描述列結構的columns屬性，並為其中之一定義自定義渲染函數。 在此自定義渲染功能，我創造這一個按鈕實例disabled狀態應取決於父母的狀態，在buttonsDisabled值是通過設置useState()掛鈎。 到目前為止，它工作正常，但是當我還使用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值會阻止在更改buttonsDisabled值時觸發指定的customBodyRender函數，而通過簡單的賦值設置它就可以了。 在這兩種情況下，它畢竟仍然是對同一個數組的引用。 我相信這是我遺漏的一些簡單概念，但我希望得到一些幫助來指出那是什么。

Answer 1

當您創建初始columns狀態時，您的customBodyRender函數可以訪問外部函數的buttonsDisabled變量（請參閱： closure ），該變量默認為false 。 初始化完成后，你的columns變量存儲在你的狀態， buttonsDisabled內部變量customBodyRender將繼續從外部函數引用原始值。

您是否可以將buttonsDisabled傳遞到您的MUIDataTable表組件中，並將其作為參數傳遞給customBodyRender函數？

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