javascript - React To-Do 应用程序 : Removing items, 但保持个人状态

Question

我的 React 应用程序遇到了问题。到目前为止，有足够的功能可以将待办事项添加到列表中，通过索引删除它们并将它们标记为完成(文本装饰:直通)。

当我删除一个已经被划掉的项目时，我希望其他项目保持它们自己的状态，但事实并非如此。这就是我的意思。

Let's remove the crossed out item Why is the bottom one crossed out now?这是我的代码

ToDoApp.js

    import React from 'react';

import Header from './Header';
import AddToDo from './AddToDo';
import FilterToDo from './FilterToDo';
import ToDoList from './ToDoList';
import ListButtons from './ListButtons';

export default class ToDoApp extends React.Component {
  state = {
    toDos: []
  };
  handleAddToDo = (toDo) => {
    if (!toDo) {
      return "Nothing was added!";
    }
    this.setState((prevState) => ({
      toDos: prevState.toDos.concat([toDo])
    }));
  };
  handleRemoveToDo = (removeIndex) => {
    this.setState((prevState) => ({
      toDos: prevState.toDos.filter((toDo, index) => index !== removeIndex)
    }));
  };
  render() {
    return (
      <div>
        <Header />
        <AddToDo
          handleAddToDo={this.handleAddToDo}
        />
        <FilterToDo />
        <ToDoList
          toDos={this.state.toDos}
          handleRemoveToDo={this.handleRemoveToDo}
        />
        <ListButtons />
      </div>
    );
  };
};

ToDoList.js

import React from 'react';
import ToDoListItem from './ToDoListItem';

const ToDoList = (props) => (
  <div>
    <h3>To Do List</h3>
    <div>
      {props.toDos.map((toDo , index) => (
        <ToDoListItem
          key={index}
          index={index}
          toDoTitle={toDo}
          handleRemoveToDo={props.handleRemoveToDo}
        />))}
    </div>
  </div>
);

export default ToDoList;

ToDoListItem.js

import React from 'react';

export default class ToDoListItem extends React.Component {
  state = {
    done: false
  };
  handleDoneTrigger = () => {
    this.setState((prevState) => ({ done: !prevState.done }));
  };
  render() {
    return (
      <div>
        <p
          className={this.state.done ? "done" : ""}
        >{this.props.toDoTitle}</p>
        <button onClick={(e) => {
          this.props.handleRemoveToDo(this.props.index)
        }}>Remove</button>
        <button onClick={this.handleDoneTrigger}>Done</button>
      </div>
    );
  }
};

Answer 1

问题出在这段代码上:

<ToDoListItem
      key={index}
      index={index}
      toDoTitle={toDo}
      handleRemoveToDo={props.handleRemoveToDo}
    />))}

当您将索引设置为 ToDoListItem 的键时。而不是为每个元素分配一些唯一键的索引，因为当你删除一个项目时，它的索引分配给列表中的下一个项目。

这将有助于深入挖掘:https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318