单击按钮并将数据添加到数据库时出现错误反应

Question

我正在尝试将数据添加到数据库中，同时将其显示在前端的 table 中。单击按钮即可将数据添加到数据库中。

数据添加到数据库没有任何问题，但是当试图在 table 中显示它时，我只是遇到一些错误。The error picture is here.

我正在使用的table看起来像这样（反应引导数据table）

<MDBDataTable
            striped
            small
            data={data}
            tbodyTextWhite
            theadTextWhite
            noBottomColumns
          />

data 变量是一个数组，如下所示：

const data = {
    columns: [
      //RANDOM COLUMNS HERE
    ],
    rows: tableRowsData(history_numbers_user_database),
  };

行输出示例：

    {
      id: "4",
      nr: "50898980",
      service: "ps5",
      id3: "500",
      delete: "yes",
    },
    {
      id: "5",
      nr: "50898980",
      service: "tv",
      id3: "500",
      delete: "yes",
    }

tableRowsData(history_numbers_user_database) 看起来像这样

const tableRowsData = (database_data) => {
    if (!database_data) {
      return [];
    }

    return database_data;
  };

和 history_numbers_user_database 看起来像这样：

  const history_numbers_user_database = useSelector((state) => {
    console.log(state);
    return state.auth.user ? state.auth.user.history_phone_numbers : "";
  });

按钮点击数据需要添加到history_numbers_user_database（新行也需要添加到table）中数据库，它应该在前端动态显示。

data 变量应该始终是一个数组，我猜这就是我遇到这个问题的原因，但我不明白点击按钮是如何改变变量的类型或者是否与重新渲染有关。

Answer 1

const tableRowsData = (database_data) => {
    if (!database_data) {
      return [];
    }

    return database_data;
  };

您正在使用字符串调用此函数，在第二种情况下，它只是 returns 您传递给它的内容。在您的 history_numbers_user_database 选择器中，它 returns 三元组末尾的空字符串。
所以当你调用 tableRowsData("") 时，它 returns 是一个字符串，它不是数组，因此 .filter is not a function.

单击按钮并将数据添加到数据库时出现错误反应

React error during button click and adding data to database

javascript

reactjs

react-native

mdbootstrap