javascript - React - 使用 setState 更新状态中的对象数组

Question

我正在开发一款餐 table 规划应用程序，可以将客人分配到餐 table 。 我在名为 tabledata 的状态下创建了一个对象数组，其中将包含如下对象:

    this.state = {
      tabledata: [
        {
          name: "Top Table",
          guests: ["guest1", "guest2", "guest3"]
        },
        {
          name: "Table One",
          guests: ["guest3", "guest4", "guest5"]
        }
      ]
    }

然后，我创建一个拖放界面，客人可以在其中在 table 之间移动。我尝试像这样更新状态:

  updateTableList (tablename, guest) {
    const selectedTableObj = this.state.tabledata.filter((tableObj) => tableObj.name === tablename);
    const otherTableObjs = this.state.tabledata.filter((tableObj) => tableObj.name !== tablename);

    selectedTableObj[0].guests.push(guest);
    const updatedObjectArray = [...otherTableObjs, selectedTableObj];

    this.setState({
      tabledata: [...otherTableObjs, ...selectedTableObj]
    });

  }

这可行，但因为我从状态中删除 selectedTableObj ，然后将其添加到数组的末尾，所以我在屏幕上得到了一些奇怪的结果。更新后的表格始终位于页面底部(如您所料)。

如何更新对象而不更改其在数组中的位置？

Answer 1

使用 Array.findIndex() 查找要更新的表的索引。创建一个新的 tabledata 数组。使用Array.slice()获取更新表之前和之后的项目，以及 spread将它们放入新的 tabledata 数组中。使用对象扩展创建一个新的表格对象，添加更新的 guests 数组，并在前面的项目之间添加表格对象:

代码(未测试):

updateTableList(tablename, guest) {
  this.setState((prevState) => {
    const tableData = prevState.tabledata;
    const selectedTableIndex = tableData.findIndex((tableObj) => tableObj.name === tablename);
    const updatedTable = tableData[selectedTableIndex];

    return {
      tabledata: [
        ...prevState.tabledata.slice(0, selectedTableIndex),
        {
          ...updatedTable,
          guests: [...updatedTable.guests, guest]
        },
        ...prevState.tabledata.slice(selectedTableIndex + 1)
      ]
    };
  });
}