反应从待办事项列表中删除项目答案

【问题标题】：React Removing an item from a to do list反应从待办事项列表中删除项目
【发布时间】：2019-05-05 16:27:23
【问题描述】：

我正在创建一个简单的待办事项列表，我目前正在处理一个删除按钮，我创建了一个数组，然后将该数组传递给一个道具，然后我需要在用户单击删除按钮。我能够存储数组编号，但在删除数组后似乎无法更新数组。

上课：

 <TodoList items={this.state.items} deleteItems={this.deleteItem}/>

子类代码：

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.removeItem = this.removeItem.bind(this);

  }

  render() {

    return (
      <div>  
        { this.props.items.map((item, i) => (
          <div className={"col-12"} key={item.id}>
            <div className={"card text-white"}>
              <div className={item.priority}>
                <div className={"col-12 card-body"}>
                  <h1>{item.title}</h1>
                  <p>{item.text}</p>
                  <button onClick={() => { this.removeItem(item, i)}} key={i} className={"col-12 btn btn-primary bg-red"}>Delete</button> 
                </div>         
              <div/>
            </div>
          </div>
        </div>
        ))}
      </div>

    );

  }
  removeItem(e, i) {
    this.props.items.splice(i, '');
    console.log(i);
  }
}

我一直在研究不同的堆栈问题，但似乎没有一个解决方案适用于此，感谢任何建设性的反馈:)

【问题讨论】：

您可能想了解关于不变性的内容。这是一个很好的起点。 :-)
我会读一读，谢谢你的建议:)
道具应该是不可变的，你不应该修改它们并期望你的组件重新渲染。您没有解释数组的来源，但您应该调用一个 prop 函数，以便管理该 prop 的任何东西都可以删除该项目，例如props.removeItem(someuniqueId/someIndex)。此外，您不应该只使用 splice，因为它不会创建新的引用，最好使用 filter。从本地状态开始会更容易。
我相信应该有自己的状态
你必须在父组件中定义remove item并使用props调用函数。

标签： javascript reactjs react-native jsx

【解决方案1】：

我相信<TodoList /> 组件应该有自己的状态。但是，如果你不能这样做，这个问题有两种解决方案：

保持<ToDoList /> 组件的状态和道具同步（以防父组件修改作为项目传递下来的状态）。然后修改<TodoList />的状态。
声明一个方法来删除父组件内的项目，该项目具有状态，并将其作为道具传递（推荐）

示例代码：

class ParentComponent extends Component {
  state = {   
    items: [1, 2, 3]
  }

  removeItem = index => () => {
    this.setState(prevState => ({
      items: prevState.items.filter((_, i) => i !== index) //Filter the items
    }));
  };

  render() {
    return (
     <TodoList items={this.state.items} deleteItems={this.removeItem} />
    );
  }
}

重要提示：始终使用纯函数来修改状态。不要使用.splice() 或.push()（如果您还没有克隆状态）。使用.filter()、.map()、.concat() 等总是更安全。

【讨论】：