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

Posted 2023-02-22

【中文标题】试图从 React 中的对象数组中删除一个项目

【英文标题】：Trying to delete an item from arrays of objects in React

【发布时间】：2019-12-18 15:28:44

【问题描述】：

我正在学习 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

【问题讨论】：

您可以使用.filter() 删除您不想要的项目

为什么不尝试将删除事件放在App组件中？然后使用 props 给 Todos 组件触发它。

@GQSM 我是 React 的菜鸟。我不知道如何完成这些解决方案。您介意使用我的代码示例为我提供答案并解释一下解决方案吗？

好的！等着我！

【参考方案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触发，有问题请私信我。

【讨论】：

@CQSM 谢谢，但它在 deleleTodo() 方法中引发语法错误...我删除了 const 关键字并消除了该错误，但我得到 workTodo is undefined

filter 比找到索引然后拼接出对象要容易。

@Andy 但 deleteEvent 希望删除待办事项

@ManuelAbascal 只需将 worktodo 更改为 worktodos ！是我的错！

问题出在let workTodos = [...this.todos];。应该是let workTodos = [...this.state.todos];。