javascript - React 从状态数组中删除

Question

我正在开发我的第一个使用 React 的应用程序。尝试创建删除功能，允许用户单击任务并将其从数组和 UI 中删除。

我一直在按照其他人的教程尝试一些不同的事情，但没有运气。 (检查注释掉的部分)我的 console.log 在 deleteItem 函数中显示未定义，所以我知道它没有接收到正确的数据。我不知道为什么。

应用程序.js:

import React, { Component } from 'react';
import { List } from './list';

export class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            term: '',
            items: []
        };
        this.deleteItem = this.deleteItem.bind(this);
    }
    onChange = (e) => {
        this.setState({term: e.target.value});
    }
    onSubmit = (e) => {
        e.preventDefault()
        if (this.state.term === "") {
            alert("You must enter something!");

        } else {
            this.setState({
                term: '',
                items: [...this.state.items, this.state.term]
            })
        }
    }

    deleteItem(index){
        // var filteredItems = this.state.items.filter(function (item) {
        // return(item.index !== index);
        // });
        // console.log(filteredItems);
        // this.setState({
        // itmes: filteredItems
        // })

        this.setState({items: this.state.items.filter(function(item){
            console.log(item.index)
            return item !== item.index
        })})
        console.log(this.state.items)
        // if (item.index === index) {
        //     var indArr = this.state.items.indexOf(item.index);
        //     this.state.items.splice(indArr, 1);  
        // }

    }


    render() {
        return(
            <div>
                <h3>You currently have {this.state.items.length} things to do.</h3>
                <form className="Todo" onSubmit={this.onSubmit}>
                    <input placeholder="Enter task" value={this.state.term} onChange={this.onChange} />
                    <button>add</button>
                </form>
                <List items={this.state.items} delete={this.deleteItem}/>
            </div>
        )
    }
}

列表.js

import React, { Component } from 'react';


export class List extends Component {   
    constructor(props) {
        super(props);
        this.delete = this.delete.bind(this);
    }
    delete(key) {
        this.props.delete(key);
    }
    render() {
        return(
            <ul>
                {
                    this.props.items.map((item, key) => <div class="listItems" 
                        onClick={(e) => this.delete(item.key)}
                        key={key}>{item}</div>)
                }
            </ul>
        )
    }
}

任何帮助将不胜感激。

Answer 1

我发现您的代码存在一些问题。

TD:LR

// List.js
onClick={(e) => this.delete(item.key)
// instead => 
onClick={() => this.delete(item)

// App.js
return item !== item.index
// instead => 
return item !== index

这是我的代码链接，你可以看看: https://stackblitz.com/edit/react-n2uy9z

<强>1。在 List.js 中向 this.delete 传递错误值

onClick={(e) => this.delete(item.key)

item.key是数组索引，你应该传递 item您要删除的内容。和参数 e不需要，因为您使用 item .

<强>2。过滤器回调函数不对

this.setState({items: this.state.items.filter(function(item){
      console.log(item.index)
    return item!== item.index
})})

item.index未定义，因为 item是数组中的一个值，它没有 index属性(property)。将删除的值为 index它被传递给函数 deleteItem ，所以你应该使用 return item !== index .

<强>3。无效的 DOM 属性 class .

这是 <div class="listItems" 中的警告: '警告:无效的 DOM 属性 class 。您是说 className ？'。

所以使用className而不是class .