使用 mui-datatable 动态添加新列

Question

每次按下按钮时，我都想在 mui-datatable 中添加一个新列。然而，数据表似乎并没有呈现它。但是，如果我单击添加列按钮，然后选择下拉列表，则会出现新列。此外，选定的下拉值似乎也没有反映出来。我已将问题缩小到使用 const [columns,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]);