为什么我的 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

首先这里有一个很大的概念错误：&nbsp; if (this._tarefaInput.value !== ""){&nbsp; &nbsp; state.list.push({ text: this._taskInput.value });&nbsp; &nbsp; this.setState(state);&nbsp; }您正在使用该推送功能直接编辑状态，您不应该在反应中这样做，因为它会导致意想不到的后果，这就是您应该如何更新状态：&nbsp; if (this._tarefaInput.value !== ""){&nbsp; &nbsp; //use the spread operator (...) to create a copy of the list in the state&nbsp; &nbsp; const newList = [... state.list];&nbsp; &nbsp; // push the new element tot the new list&nbsp; &nbsp; newList.push({ text: this._taskInput.value });&nbsp; &nbsp; // update the state&nbsp; &nbsp; this.setState({list: newList});&nbsp; }现在你得到的错误很可能发生，因为在你的代码中的某个地方（可能在里面<Table/>）你试图将列表数组的每个元素打印为一个反应组件。您尚未共享列表呈现的部分，但我猜您正在做这样的事情：//somewhere inside a render:{&nbsp; list.map(Element => <Element />);}//Proper way of doing it{&nbsp; list.map(element => <p>{element.text}</p>);}如果您共享更多代码和带有错误描述的整个日志（带有文件和行号），我可以尝试提供更多帮助

Answer 2

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