Javascript 为什么我的设置状态不'；你不接受这个东西吗？

我在React的待办事项列表中工作，当调用方法

deleteItem

时，我得到

Uncaught错误：对象作为React子对象无效（找到：具有键{text}的对象）

，但我不理解原因

class Form extends Component{
    constructor(props){
        super(props);

        this.state = {
            task: "",
            list: []
        }

        this.saveItem = this.saveItem.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
    }

    saveItem(event){

        let state = this.state;
        event.preventDefault();

        if(this._taskInput.value !== ""){

            state.list.push({ text: this._taskInput.value });
            this.setState(state);
        }

        this.setState({task: ""});

    }

    deleteItem(index){

        const {list} = this.state;

        this.setState({
            list: list.filter((item,itemCurrent) => {
                // console.log(item.key, index);
                return (itemCurrent !== index);
            }),
        });


    }

render(){
        return(
            <Fragment>
                    <form  onSubmit={this.saveItem}>

                                <input value= {this.state.task} id="to-do" 
                                    onChange={(e) => this.setState({task: e.target.value})} 
                                        ref={event => this._taskInput = event} type="text" className="validate"/>

                                <label htmlFor="to-do">My tasks</label>
                            </div>

                            <button  type="submit" name="action">Submit
                                
                            </button>
                        </div>

                        {{this.state.task}}
                        {this.state.list}
                    </form>
                </div>
                <Table list= {this.state.list} deleteItem = {this.deleteItem}/>
        

类表单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
任务：“”，
名单：[]
}
this.saveItem=this.saveItem.bind（this）；
this.deleteItem=this.deleteItem.bind（this）；
}
保存项（事件）{
让state=this.state；
event.preventDefault（）；
如果（此._taskInput.value！==“”）{
state.list.push（{text:this.\u taskInput.value}）；
本.设置状态（状态）；
}
this.setState（{task:'}）；
}
删除项目（索引）{
const{list}=this.state；
这是我的国家({
列表：list.filter（（项，项当前）=>{
//console.log（item.key，index）；
返回（itemCurrent！==索引）；
}),
});
}
render（）{
返回(
this.setState（{task:e.target.value}）
ref={event=>this.\u taskInput=event}type=“text”className=“validate”/>
我的任务
提交
{{this.state.task}
{this.state.list}

问题在于渲染中的这一行：

{this.state.list}

。您可以渲染数组，但不能渲染对象。解决方案是映射数组并输出一些JSX，如以下内容。假设您有一个具有

名称

和

id

属性的对象列表：

  {this.state.list.map(item => (<div key={item.id}>{item.id}</div>))}

{this.state.list.map（item=>（{item.id}））}

问题在于渲染中的这一行：

{this.state.list}

。您可以渲染数组，但不能渲染对象。解决方案是映射数组并输出一些JSX，如以下内容。假设您有一个具有

名称

和

id

属性的对象列表：

  {this.state.list.map(item => (<div key={item.id}>{item.id}</div>))}

{this.state.list.map（item=>（{item.id}））}

首先，这里有一个很大的概念错误：

  if (this._tarefaInput.value !== ""){
    state.list.push({ text: this._taskInput.value });
    this.setState(state);
  }

如果您使用该推送功能直接编辑状态，则不应在react中执行此操作，因为这将导致意外后果，您应该这样更新状态：

  if (this._tarefaInput.value !== ""){
    //use the spread operator (...) to create a copy of the list in the state
    const newList = [... state.list];
    // push the new element tot the new list
    newList.push({ text: this._taskInput.value });
    // update the state
    this.setState({list: newList});
  }

现在可能会发生错误，因为在代码中的某个地方（可能在

内），您试图将列表数组的每个元素打印为react组件。您尚未共享列表的呈现部分，但我猜您正在执行类似的操作：

//somewhere inside a render:

{
  list.map(Element => <Element />);
}

//Proper way of doing it

{
  list.map(element => <p>{element.text}</p>);
}

//渲染内部的某个地方：
{
map（Element=>）；
}
//正确的做法
{
map（element=>{element.text}
）；
}

---

若您共享更多的代码和带有错误描述（带有文件和行号）的整个日志，我可以尝试提供更多帮助。

首先，这里有一个很大的概念错误：

  if (this._tarefaInput.value !== ""){
    state.list.push({ text: this._taskInput.value });
    this.setState(state);
  }

如果您使用该推送功能直接编辑状态，则不应在react中执行此操作，因为这将导致意外后果，您应该这样更新状态：

  if (this._tarefaInput.value !== ""){
    //use the spread operator (...) to create a copy of the list in the state
    const newList = [... state.list];
    // push the new element tot the new list
    newList.push({ text: this._taskInput.value });
    // update the state
    this.setState({list: newList});
  }

现在可能会发生错误，因为在代码中的某个地方（可能在

内），您试图将列表数组的每个元素打印为react组件。您尚未共享列表的呈现部分，但我猜您正在执行类似的操作：

//somewhere inside a render:

{
  list.map(Element => <Element />);
}

//Proper way of doing it

{
  list.map(element => <p>{element.text}</p>);
}

//渲染内部的某个地方：
{
map（Element=>）；
}
//正确的做法
{
map（element=>{element.text}
）；
}

---

若您共享更多的代码和带有错误描述（带有文件和行号）的整个日志，我可以尝试提供更多帮助

您不需要先运行筛选，将结果保存在变量中，然后在设置状态中使用该变量吗？我的印象是，调用设置状态传递筛选函数实际上是在保存筛选函数，而不是筛选列表的实际结果。您不需要先运行筛选，然后将结果保存在变量中吗在setState中使用该变量？我的印象是，调用setState传递filter函数实际上是保存filter函数，而不是过滤列表的实际结果。