我在 React 的待辦事項列表中工作，當(dāng)deleteItem調(diào)用方法時，我得到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}/>