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

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

setState()之后,更新后的狀態(tài)不作為道具傳遞給組件

setState()之后,更新后的狀態(tài)不作為道具傳遞給組件

慕哥6287543 2021-05-03 17:34:52
我有一個(gè)名為“ App”的主要React組件,其中包含處于其狀態(tài)的用戶輸入數(shù)據(jù)。每次用戶輸入新數(shù)據(jù)時(shí),都會(huì)使用setState()更新?tīng)顟B(tài)。然后將狀態(tài)作為道具傳遞給另一個(gè)名為“ IncomeList”的組件,該組件將數(shù)據(jù)呈現(xiàn)在屏幕上。但是,在用戶輸入一些數(shù)據(jù)后,IncomeList組件未處于更新?tīng)顟B(tài)。class App extends React.Component {  constructor(props) {    super(props);    this.addData = this.addData.bind(this);    this.state = {      expenses: [],      income: [],    }  }  addData(data) {    if (data.type == 'income')  {      this.setState((prevState) => {        income: prevState.income.push(data);      }, console.log(this.state.income));    } else if (data.type == 'expense') {      this.setState((prevState) => {        expenses: prevState.expenses.push(data);      })    }  }  render() {    return (      <div>        <UserInput addData={this.addData} />        <IncomeList income={this.state.income} />      </div>    );  }}// UserInput component which contain a formclass UserInput extends React.Component {  constructor(props) {    super(props);    this.addDataLocal = this.addDataLocal.bind(this);  }  addDataLocal(e) {    e.preventDefault();    const data = {      type: e.target.elements.type.value,      description: e.target.elements.description.value,      amount: e.target.elements.amount.value     }    this.props.addData(data);  }  render() {    return (      <div>        <form onSubmit={this.addDataLocal}>        <select name="type" id="input-type" name="type">          <option value="income">Income</option>          <option value="expense">Expense</option>        </select>        <input type="text" placeholder="decription..." name="description"/>        <input type="number" placeholder="amount..." name="amount"/>        <input type="submit" value="Add"/>        </form>      </div>    )  }}class IncomeList extends React.Component {  constructor(props) {    super(props);  }  render() {    return (      <div>        {          this.props.income.map((item) => {            return (              <IncomeListItem key={item.amount} item={item}/>            )          })        }      </div>    )  }}
查看完整描述

3 回答

?
泛舟湖上清波郎朗

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

您不會(huì)從退回任何東西this.setState。您需要返回一個(gè)要與當(dāng)前狀態(tài)合并的對(duì)象。


addData(data) {

  const key = data.type === 'income' ? 'income' : 'expenses';


  this.setState(prevState => ({

    // with Computed Property Names we can make our

    // code concise and avoid conditionals

    [key]: [...prevState[key], data]

  }), console.log(this.state[key]));

}


查看完整回答
反對(duì) 回復(fù) 2021-05-13
?
瀟湘沐

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

With @Asaf Aviv input I have created a working fiddle. Hope this will help.


JS小提琴


查看完整回答
反對(duì) 回復(fù) 2021-05-13
?
元芳怎么了

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

您的addData應(yīng)該像這樣


addData(data) {

if (data.type == 'income')  {

    let income=[...this.state.income];

    income.push(data);

    this.setState({

        income:income

    })

} else if (data.type == 'expense') {

    let expenses=[...this.state.expenses];

    expenses.push(data);

    this.setState({

        expenses:expenses

    });

}

 }


查看完整回答
反對(duì) 回復(fù) 2021-05-13
  • 3 回答
  • 0 關(guān)注
  • 172 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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