试图从 React 中的对象数组中删除一个项目

Question

我正在学习 React。我正在尝试自己构建一个简单的待办事项应用程序来学习和练习图书馆。我在 父组件 中传递了一个任务列表，并将它们作为道具传递给 子组件。我还可以使用map() 方法在子组件中输出它。但是，我不知道如何删除一个项目。我尝试过在线搜索，但无法根据我的用例调整他们的解决方案。

父组件

import React, { Component } from 'react';
import './styles/components/App.css';
import Todos from './components/Todos'

class App extends Component {
  state = {
    todos: [
      { task: 'Study React', id: 1 },
      { task: 'Build something with it',  id: 2 },
      { task: 'Apply for jobs', id: 3 },
    ],
  }
  render(){
    return (
      <div className="App">
          <Todos todos={this.state.todos} />
      </div>
    );
  }
}

export default App;

子组件

import React, { Component } from 'react';
import '../styles/components/Todos.css'

class Todos extends Component {
    render() {
        let { todos } = this.props;

        let todoList = todos.map(( todo => {
            return (
                <div className="todos" key={todo.id}>
                    <div>{ todo.task }</div>
                </div>
            )
        }));
        return (
            <div onClick={this.deleteTask}>{ todoList }</div>
        )
      
    }
    deleteTask() {
        // checks if method is working
       console.log('working');
       // code to delete 
    }
}

export default Todos

Answer 1

父组件

import React, { Component } from 'react';
import './styles/components/App.css';
import Todos from './components/Todos'

class App extends Component {
  state = {
    todos: [
      { task: 'Study React', id: 1 },
      { task: 'Build something with it',  id: 2 },
      { task: 'Apply for jobs', id: 3 },
    ],
  };

  // Event and data put in same Component.
  deleteTodo(id) {
    let workTodos = [...this.state.todos];
    const deleteIndex = workTodos.findIndex(todo => todo.id === id);
    workTodos.splice(deleteIndex, 1);
    this.setState({
      todos: [...workTodos]
    })
  }

  render(){
    // Use props give Todos Component the data and events to render dom
    return (
      <div className="App">
          <Todos
            todos={this.state.todos}
            deleteTodo={this.deleteTodo.bind(this)}
          />
      </div>
    );
  }
}

export default App;

子组件

import React, { Component } from 'react';
import '../styles/components/Todos.css'

class Todos extends Component {
  render() {
    // Receiving events and data form props
    let { todos, deleteTodo } = this.props;

    // Click div trigger deleteTodo, It can execute deleteTodo in App component
    return todos.map(( todo => {
        return (
            <div
              className="todos"
              key={todo.id}
              onClick={() => { deleteTodo(todo.id) }}
            >
                <div>{ todo.task }</div>
            </div>
        )
    })); 
  }
}

export default Todos

像commit一样，在App组件中放入delete事件，然后在Todos组件中使用props触发，有问题请私信我。