javascript - setState 对象数组而不改变对象顺序

Question

在状态下，我有一个列表对象数组，想要切换 displayAddTaskForm。每次我设置状态时，被点击的列表都会重新排列并移动到 UI 列表的前面。我相信我知道为什么会这样，只是不确定解决方案。当我在 toggleAddTaskForm 中设置状态时，首先是 toggledList，然后是其他列表。如何在不更改列表顺序的情况下更新 toggledList。这是代码。

this.state = {
      lists: [
        {
          id: 1,
          header: "To Do",
          displayAddTaskForm: false,
        },
        {
          id: 2,
          header: "Working on It",
          displayAddTaskForm: false,
        },
        {
          id: 3,
          header: "Taken Care Of",
          displayAddTaskForm: false,
        }
      ],
      toggleAddTaskForm: (list) => {
        const toggledList = {...list, displayAddTaskForm: !list.displayAddTaskForm}
        const otherLists = this.state.lists.filter(l => l.id !== list.id)
        this.setState({
          lists: [toggledList, ...otherLists]
        })
      },
}

Answer 1

将函数置于状态中并不常见。我认为您需要将该功能与状态分开。

您可以使用 Array.map() 轻松切换项目，并使用项目 ID 检查点击的项目 ID。这不会改变项目的顺序。

您可以使用以下代码仅切换一个项目:

class App extends Component {
  constructor() {
    super();
    this.state = {
      lists: [
        {
          id: 1,
          header: "To Do",
          displayAddTaskForm: false
        },
        {
          id: 2,
          header: "Working on It",
          displayAddTaskForm: false
        },
        {
          id: 3,
          header: "Taken Care Of",
          displayAddTaskForm: false
        }
      ]
    };
  }
  handleClick = id => {
    let newList = this.state.lists.map(item => {
      if (item.id === id) {
        return {
          ...item,
          displayAddTaskForm: !item.displayAddTaskForm
        };
      } else {
        return {
          ...item,
          displayAddTaskForm: false
        };
      }
    });

    this.setState({ lists: newList });
  };

  render() {
    return (
      <div>
        <ul>
          {this.state.lists.map(({ id, header, displayAddTaskForm }) => {
            return (
              <li key={id} onClick={() => this.handleClick(id)}>
                {header} - Toggle Value: {displayAddTaskForm ? "true" : "false"}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

Playground

或者如果您希望能够切换每个项目，您可以像这样更改 handleClick 函数:

  handleClick = id => {
    let newList = this.state.lists.map(item => {
      if (item.id === id) {
        return {
          ...item,
          displayAddTaskForm: !item.displayAddTaskForm
        };
      } else {
        return {
          ...item
        };
      }
    });

    this.setState({ lists: newList });
  };

Playground