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]);

使用mui-datatable动态添加新列

1 个答案: