使用mui-datatable动态添加新列

Question

我想在每次按下按钮时在mui-datatable中添加一个新列。然而，datatables似乎并没有呈现它。但是，如果我单击add column按钮，然后选择下拉列表，就会出现新的列。此外，所选的下拉值似乎也没有反映出来。我已经将问题范围缩小到使用const列，setColumns = useState(...)对于列，但如果没有它，我根本不能动态添加任何新列。感谢你帮我摆脱困境，谢谢。

https://codesandbox.io/s/unruffled-sun-g77xc

const App = () => {
  function handleChange(event) {
    setState({ value: event.target.value });
  }

  const [state, setState] = useState({ value: "coconut" });

  const [columns, setColumns] = useState([
    {
      name: "Column 1",
      options: {}
    },
    {
      name: "Column with Input",
      options: {
        customBodyRender: (value, tableMeta, updateValue) => {
          return (
            <div>
              <select value={state.value} onChange={handleChange}>
                <option value="grapefruit">Grapefruit</option>
                <option value="lime">Lime</option>
                <option value="coconut">Coconut</option>
                <option value="mango">Mango</option>
              </select>
            </div>
          );
        }
      }
    }
  ]);

  const options = {
    responsive: "scroll"
  };

  const addColumn = () => {
    columns.push({
      name: "NewColumn",
      label: "NewColumn"
    });
    setColumns(columns);
  };

  const data = [["value", "value for input"], ["value", "value for input"]];

  return (
    <React.Fragment>
      <MUIDataTable columns={columns} options={options} data={data} />

      //add a new column if this button is clicked
      <button onClick={addColumn}>Add Column</button>
    </React.Fragment>
  );
};

Answer 1

实际上，您的新列并没有被推送到columns变量。使用useState时，除非使用setColumns，否则不能对变量进行更改，否则不会触发重新呈现。试试这个：

  const addColumn = () => {
    setColumns([ ...columns, {
      name: "NewColumn"
    }]);
  };

或者这样：

  const addColumn = () => {
    const editableColumns = [...columns];
    editableColumns.push({
      name: "NewColumn"
    });
    setColumns(editableColumns);
  };

两个都行，这只是你的偏好。

您可以使用以下命令测试它是否正在编辑这些列：useEffect(() => console.log(columns), [columns]);