Question

我正在创建一个简单的“待办事项”列表，我目前正在使用“删除”按钮，我创建了一个数组，然后将此数组传递到prop中，然后我需要在prop数组中拼接该项目用户单击删除按钮。我能够存储阵列号，但是删除后似乎无法更新阵列。

CLASS CALL：

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

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

Answer 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()等总是更安全。

从“待办事项”列表中删除项目

1 个答案: