时间戳

首页 > 解决方案 > React To-Do 应用程序：删除项目，但保持单个状态

javascript - React To-Do 应用程序：删除项目，但保持单个状态

问题描述

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

当我删除一个已经被划掉的项目时，我希望其他项目保持自己的状态，但他们没有。这就是我的意思。

让我们删除划掉的项目 为什么现在底部的一项被划掉了？ 这是我的代码

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>
    );
  }
};

标签： javascriptreactjs

解决方案

问题在于这段代码：

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

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

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

推荐阅读