更新React中删除的显示组件列表

Question

在我使用React的路径的开始我正在创建简单的待办事项应用程序，其中用户可以添加/删除基本上是独立组件的任务。

我用以下方法创建任务

addTask(taskObj){
    let tasksList = this.state.tasksList;
    tasksList.push(taskObj);
    this.setState({tasksList : tasksList});
}

我使用以下方法渲染组件（任务）列表：

showTasks(){
    return (
        this.state.tasksList.map((item, index) => {
            return <SingleTask
                taskObj={item}
                removeTask = {(id) => this.removeTask(id)}
                key = {index}/>;
        })
    );
}

删除特定任务的方法将任务的唯一ID作为参数，并根据此ID将其从任务列表中删除：

removeTask(uID){
  this.setState(prevState => ({
        tasksList: prevState.tasksList.filter(el => el.id != uID )
    }));
}

但问题是，当我删除任何项目而不是最后一项时，似乎实际的组件列表是相同的，只有不同的对象被传递给那些组件。

例如：假设我有2个已创建的组件，如果我在第一个上设置state.Name ='Foo'，在第二个上设置state.Name ='Bar'。如果我单击第一个上的删除按钮，则删除与该组件关联的对象，第二个变为第一个，但它是state.Name现在是'Foo'而不是'Bar'。

我想我错过了正确创建/删除/显示组件的东西。

编辑：

用于删除点击组件的方法：

removeCurrentTask(){
    this.props.removeTask(this.props.taskObj.id);
}

SingleTask组件：

class SingleTask extends Component{
constructor(props) {
    super(props);

    this.state={
        showMenu : false,
        afterInit : false,
        id: Math.random()*100
    }

    this.toggleMenu = this.toggleMenu.bind(this);
}

toggleMenu(){
    this.setState({showMenu : !this.state.showMenu, afterInit : true});
}

render(){
    return(
        <MDBRow>
            <MDBCard className="singleTaskContainer">

                <MDBCardTitle>
                    <div class="priorityBadge">

                    </div>
                </MDBCardTitle>
                <MDBCardBody className="singleTaskBody">
                    <div className="singleTaskMenuContainer">

                        <a href="#" onClick={this.toggleMenu}>
                            <i className="align-middle material-icons">menu</i>
                        </a>
                        <div className={classNames('singleTaskMenuButtonsContainer animated',
                            {'show fadeInRight' : this.state.showMenu},
                            {'hideElement' : !this.state.showMenu},
                            {'fadeOutLeft' : !this.state.showMenu && this.state.afterInit})}>
                            <a
                                title="Remove task"
                                onClick={this.props.removeTask.bind(null, this.props.taskObj.id)}
                                className={
                                    classNames(
                                        'float-right btn-floating btn-smallx waves-effect waves-light listMenuBtn lightRed'
                                        )
                                }
                            >
                                <i className="align-middle material-icons">remove</i>
                            </a>
                            <a  title="Edit title"
                                className={classNames('show float-right btn-floating btn-smallx waves-effect waves-light listMenuBtn lightBlue')}
                            >
                                <i className="align-middle material-icons">edit</i>
                            </a>
                        </div>
                    </div>
                    {this.props.taskObj.description}
                    <br/>
                    {this.state.id}
                    </MDBCardBody>
            </MDBCard>
        </MDBRow>
    );
}

}

在错误的视觉表示下，左侧的图像是预删除，右侧是删除后的图像。当删除带有“22”的卡时，组件本身未被删除，只有另一个对象被传递给它。

Answer 1

简而言之，在声明tasksList.push(<SingleTask taskObj={taskObj} removeTask ={this.removeTask}/>);，removeTask = {this.removeTask}应该成为removeTask = {() => this.removeTask(taskObj.id)}。

但是，我会重新考虑编写addTask和showTasks方法的方式。虽然你写的方式没有错，但它在语义上是不合理的。这就是我要做的事情：

addTask(taskObj){
    let tasksList = this.state.tasksList;
    tasksList.push(taskObj);
    this.setState({tasksList : tasksList});
}

showTasks(){
    return (
        this.state.tasksList.map((item, index) => {
            return <SingleTask
                       taskObj={item}
                       removeTask ={() => this.removeTask(item.id)}/>;
        })
    );
}

const SingleTask = (task) => {
  const { taskObj } = task;
  return <div onClick={task.removeTask}>
    { taskObj.title }
  </div>
}

// Example class component
class App extends React.Component {
state = {
    tasksList: [
      { id: 1, title: "One" },
      { id: 2, title: "Two" },
      { id: 3, title: "Three" },
      { id: 4, title: "Four" }
    ]
  }
  
  addTask = (taskObj) => {
    let tasksList = this.state.tasksList;
    tasksList.push(taskObj);
    this.setState({tasksList : tasksList});
  }
  
  showTasks = () => {
    return (
        this.state.tasksList.map((item, index) => {
          return <SingleTask
            key={index}
            taskObj={item}
            removeTask ={() => this.removeTask(item.id)}/>;
        })
    );
  }
  
  removeTask(id) {
    this.setState(prevState => ({
      tasksList: prevState.tasksList.filter(el => el.id != id )
    }));
  }
  
  render() {
    return (
      <div className="App">
        <div> {this.showTasks()} </div>
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.body
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

只是为了澄清，解决方案比预期的简单。

在

const showTasks = () =>  taskList.map((item, index) => (
        <SingleTask
            taskObj={item}
            removeTask ={removeTask}
            key = {item.id}
        />
        )
    )

我将地图index作为关键字传递，当我将其更改为{item.id}时，一切都按预期工作。