Question

如何从数组中删除一个项目？我已经尝试过几件事而且没有成功。只是想做一个基本的待办事项应用程序。我已经更新了我的帖子以提供渲染方法来显示deleteTodo的去向。我还用我在这篇文章中得到的答案更新了我的deleteTodo。它有点工作，唯一的问题是它删除了待办事项列表中的所有项目，而不仅仅是单个项目。

class App extends Component {
  state = {
    inputValue: "",
    todos: [{
        value: "walk the dog",
        done: false
      },
      {
        value: "do the dishes",
        done: false
      }
    ]
  }

  addTodo = (e) => {
    this.setState({
      inputValue: e.target.value
    });
  }

  handleSubmit = (e) => {
    e.preventDefault();
    // console.log('clicked')
    const newTodo = {
      value: this.state.inputValue,
      done: false
    }
    const todos = this.state.todos;
    todos.push(newTodo);
    this.setState({
      todos,
      inputValue: ''
    })
  }

  deleteTodo = (value) => {
    // Take copy of current todos
    const todos = [this.state.todos];
    const filteredTodos = todos.filter((item) => item.value !== value);
    this.setState({
      todos: filteredTodos
    }) 
  }

  render() {
    return (
      <div className="App">
        <Form 
          addTodo={this.addTodo}
          handleSubmit={this.handleSubmit}
        />
        <List 
         todos={this.state.todos}
         deleteTodo={this.deleteTodo}
        />
      </div>
    );
  }
}

export default App;

Answer 1

您对filter的使用似乎是个问题。要创建一个没有value使用过滤器的新元素数组，您可以尝试这样的事情：

编辑：使用完整的演示版更新了答案

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

class Form extends Component {
    constructor(props) {
        super(props);
        this.textRef = React.createRef();
    }

    render() {
        return (
            <form onSubmit={(e)=>{e.preventDefault(); this.props.handleSubmit(this.textRef.current.value)}}>
                <input type="text" ref={this.textRef}/>
                <input type="submit" value="add"/>
            </form>
        );
    }
}

class List extends Component {
    render() {
        return (
            <ul>
                {
                    this.props.todos.map((todo) => (
                        <li key={todo.value}>
                            <p><input type="checkbox" checked={todo.done}/>{todo.value} </p>
                            <input type="button" onClick={() => (this.props.deleteTodo(todo.value))} value="delete"/>
                        </li>
                    ))
                }
            </ul>
        );
    }
}

class App extends Component {
    state = {
        inputValue: "",
        todos: [{
            value: "walk the dog",
            done: false
        },
            {
                value: "do the dishes",
                done: false
            }
        ]
    }

    addTodo = (e) => {
        this.setState({
            inputValue: e.target.value
        });
    }

    handleSubmit = (value) => {
        const newTodo = {
            value,
            done: false
        }
        const todos = [...this.state.todos];
        todos.push(newTodo);
        this.setState({
            todos,
            inputValue: ''
        })
    }

    deleteTodo = (value) => {
        const todos = this.state.todos;
        const filteredTodos = todos.filter((item) => item.value !== value);
        this.setState({
            todos: filteredTodos
        })
    }

    render() {
        return (
            <div className="App">
                <Form
                    addTodo={this.addTodo}
                    handleSubmit={this.handleSubmit}
                />
                <List
                    todos={this.state.todos}
                    deleteTodo={this.deleteTodo}
                />
            </div>
        );
    }
}


export default App;

此外，我更改了您的handleSubmit方法以创建新数组以与React的功能范例保持一致

Answer 2

您只需要从数组中过滤该值，并在setState中设置新的过滤数组。

deleteTodo = (value) => {
    // Take copy of current todos
    const todos = [...this.state.todos];
    const filteredTodos = todos.filter( (item) => item.value !== value);
  this.setState({
  todos: filteredTodos

}） }

Answer 3

我已经使用了lodash这样的话。 lodash是一个用于执行此类事务的库https://lodash.com/

如果您可以获得插入的相同值对象，则添加其余内容非常容易

你要找到你在数组中拥有对象的索引删除功能

const todos = this.state.todos;
const itemToRemove = {value: "walk the dog",done: false};
var index = _.findIndex(todos, itemToRemove); 
const filteredTodos = todos.splice(index, 1)

this.setState({
  todos: filteredTodos
})

希望这会有所帮助

从反应阵列中移除

3 个答案: