为什么我的 setState 不接受这个对象？

Question

我在 React 的待办事项列表中工作，当deleteItem调用方法时，我得到Uncaught Error: Objects are not valid as a React child (found: object with keys {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}/>

Answer 1

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

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

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

    this.setState(state);

  }

您正在使用该推送功能直接编辑状态，您不应该在反应中这样做，因为它会导致意想不到的后果，这就是您应该如何更新状态：

  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});

  }

现在你得到的错误很可能发生，因为在你的代码中的某个地方（可能在里面<Table/>）你试图将列表数组的每个元素打印为一个反应组件。您尚未共享列表呈现的部分，但我猜您正在做这样的事情：

//somewhere inside a render:

{

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

}

//Proper way of doing it

{

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

}

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

Answer 2

问题是您的渲染中的这一行：{this.state.list}。你可以渲染一个数组，但你不能渲染一个对象。解决方案是映射数组并输出一些 JSX，如下所示。假设您有一个具有 aname和id属性的对象列表：

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