第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

為什么我的 setState 不接受這個(gè)對(duì)象?

為什么我的 setState 不接受這個(gè)對(duì)象?

蕪湖不蕪 2022-10-21 10:25:51
我在 React 的待辦事項(xiàng)列表中工作,當(dāng)deleteItem調(diào)用方法時(shí),我得到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}/>
查看完整描述

2 回答

?
小唯快跑啊

TA貢獻(xiàn)1863條經(jīng)驗(yàn) 獲得超2個(gè)贊

首先這里有一個(gè)很大的概念錯(cuò)誤:


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

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

    this.setState(state);

  }

您正在使用該推送功能直接編輯狀態(tài),您不應(yīng)該在反應(yīng)中這樣做,因?yàn)樗鼤?huì)導(dǎo)致意想不到的后果,這就是您應(yīng)該如何更新狀態(tài):


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

  }

現(xiàn)在你得到的錯(cuò)誤很可能發(fā)生,因?yàn)樵谀愕拇a中的某個(gè)地方(可能在里面<Table/>)你試圖將列表數(shù)組的每個(gè)元素打印為一個(gè)反應(yīng)組件。您尚未共享列表呈現(xiàn)的部分,但我猜您正在做這樣的事情:


//somewhere inside a render:


{

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

}


//Proper way of doing it


{

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

}


如果您共享更多代碼和帶有錯(cuò)誤描述的整個(gè)日志(帶有文件和行號(hào)),我可以嘗試提供更多幫助


查看完整回答
反對(duì) 回復(fù) 2022-10-21
?
神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

問題是您的渲染中的這一行:{this.state.list}。你可以渲染一個(gè)數(shù)組,但你不能渲染一個(gè)對(duì)象。解決方案是映射數(shù)組并輸出一些 JSX,如下所示。假設(shè)您有一個(gè)具有 anameid屬性的對(duì)象列表:

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



查看完整回答
反對(duì) 回復(fù) 2022-10-21
  • 2 回答
  • 0 關(guān)注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)