Reactjs 使用mui datatable动态添加新列

我想在每次按下按钮时在mui datatable中添加一个新列。然而，datatables似乎没有呈现它。但是，如果单击“添加列”按钮，然后选择下拉列表，则会显示新列。此外，所选下拉列表值似乎也没有反映出来。我已经将问题缩小到对列使用const[columns，setColumns]=useState（…），但是如果没有它，我根本无法动态添加任何新列。谢谢你帮我摆脱困境，谢谢

const-App=（）=>{
函数句柄更改（事件）{
setState（{value:event.target.value}）；
}
const[state，setState]=useState（{value:“couch”}）；
const[columns，setColumns]=useState([
{
名称：“第1列”，
选项：{}
},
{
名称：“有输入的列”，
选项：{
customBodyRender：（值、tableMeta、updateValue）=>{
返回(
葡萄柚
石灰
椰子
芒果
);
}
}
}
]);
常量选项={
响应：“滚动”
};
常量addColumn=（）=>{
柱推({
名称：“新列”，
标签：“NewColumn”
});
设置列（列）；
};
常量数据=[“值”，“输入值”]，[“值”，“输入值”]；
返回(
//如果单击此按钮，则添加新列
添加列
);
};

您的新列实际上没有被推送到

列

变量。使用useState时，除非使用

setColumns

，否则无法对变量进行更改，否则不会触发重新渲染。试试这个：

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

或者这个：

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

两种方法都可以，这只是你的喜好

您可以使用以下命令测试它是否正在编辑列：

---

useffect（（）=>console.log（columns），[columns]）
谢谢您的帮助。我已经修改了它，现在可以添加列了。Tbh我已经用你在这里打开这篇文章后描述的方法修复了它。但是，正如您从这里修改的代码中看到的，下拉列表仍然不能反映我选择的值。请将您的选择标记更改为
updateValue（e.target.value）}>