Javascript this.setState删除过滤器-ReactJS

好了，伙计们，我这里有个问题。 几天以来我一直在解决这个问题，所以如果有人能给我一个提示，告诉我如何解决这个问题，我会很高兴的。（或者有人可以提出解决方案）。 因此，我通过

materialtable

library创建了自己的表。但是在我的例子中，我需要将

docID

和

docNR

作为每个复选框的值。这就是为什么我使用了一个独立于

材质ui

-

的组件。 总之，我已经跟踪到我的问题来自我的

handleCheckBox

函数。特别是我的更新状态函数

this.setState

。我的问题来自于我的setState函数是什么？还是我做错了什么，你会说

视觉示例

我的方法

handleCheckboxClick = (clickedItem) => {

        let newDocList = { ...this.state.docList };
        if (clickedItem.checked) {
            newDocList[clickedItem.documentId] = clickedItem.documentNumber;
        } else {
            delete newDocList[clickedItem.documentId];
        }

        let toSee = Object.keys(newDocList).length > 0 ? true : false;

        this.setState({
                docList: newDocList,
                visible: toSee
            }, () => {
                console.log()
            });

        const updatedArray = this.state.items.map((item) => {
            item.checked = item.documentId === clickedItem.documentId ? !item.checked : item.checked;
            return item;
        });

        this.setState({

            items: updatedArray,
        });
    };

p.S.

---

我尝试了一个只有控制台init的空函数，它工作起来很有魅力。

这里的问题是，选中该框后，您的表将重新呈现，这使它重新创建列数组。此数组用于存储筛选数据

您需要做的是将列数据存储在渲染函数之外的某个位置。举一个简单的例子看看UsStand（或者考虑ReDux/MuBx）：

const BasicFilteringWithState=（）=>{
常量[列数据]=使用状态([
{标题：“名称”，字段：“名称”}，
{标题：“姓氏”，字段：“姓氏”}，
{标题：“出生年份”，字段：“出生年份”，类型：“数字”}，
{
标题：“出生地”，
字段：“出生地”，
查阅：{34:İstanbul'，63:Şanlıurfa}
}
]);
返回(
);
};

看看这个沙箱：

我将示例保持原样，并添加了带有useState的示例。您可以筛选这两个表，然后单击底部的测试按钮。你会看到区别的

---

在相关说明中，不要忘记检查为什么表会因为复选框而被重新呈现。这可能是您的组件没有优化（记忆化）的迹象。

您可以添加您的项目吗？在，我非常乐意提供帮助（我自己也有一些问题），在这里复制代码会很有用，因为很难看到在哪里发生了什么。检查操作似乎会导致组件更新。过滤器（“1987”）值是如何存储的/存储在哪里的？@RenaldoBalaj感谢你们的参与。我试图创建一个例子，但给了我一些错误。这是图书馆：如果你能在这里玩的话。这里是我设法创建的，例如无法运行它：P/turbo_模块中的错误/react@16.12.0/cjs/react.development.js（1590:13）钩子调用无效。钩子只能在函数组件的主体内部调用@RenaldoBalaj试试这个。也许它不能通过沙箱运行。但是基本上，如果你看一下我发送的库示例，你可以从上面添加一个构造函数和一个简单的函数来更改

this.setState

const BasicFilteringWithState = () => {
  const [columnsData] = useState([
    { title: "Name", field: "name" },
    { title: "Surname", field: "surname" },
    { title: "Birth Year", field: "birthYear", type: "numeric" },
    {
      title: "Birth Place",
      field: "birthCity",
      lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
    }
  ]);

  return (
    <MaterialTable
      title="Basic Filtering Preview"
      columns={columnsData}
      data={[
        { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
        {
          name: "Zerya Betül",
          surname: "Baran",
          birthYear: 2017,
          birthCity: 34
        }
      ]}
      options={{
        filtering: true
      }}
    />
  );
};