setState（）之后，更新后的状态不作为道具传递给组件

Question

我有一个名为“ App”的主要React组件，其中包含处于其状态的用户输入数据。每次用户输入新数据时，都会使用setState（）更新状态。然后将状态作为道具传递给另一个名为“ IncomeList”的组件，该组件将数据呈现在屏幕上。但是，在用户输入一些数据后，IncomeList组件未处于更新状态。

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 form

class 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>

    )

  }

}

Answer 1

您不会从退回任何东西this.setState。您需要返回一个要与当前状态合并的对象。addData(data) {&nbsp; const key = data.type === 'income' ? 'income' : 'expenses';&nbsp; this.setState(prevState => ({&nbsp; &nbsp; // with Computed Property Names we can make our&nbsp; &nbsp; // code concise and avoid conditionals&nbsp; &nbsp; [key]: [...prevState[key], data]&nbsp; }), console.log(this.state[key]));}

Answer 2

With&nbsp;@Asaf&nbsp;Aviv&nbsp;input&nbsp;I&nbsp;have&nbsp;created&nbsp;a&nbsp;working&nbsp;fiddle.&nbsp;Hope&nbsp;this&nbsp;will&nbsp;help.JS小提琴

Answer 3

您的addData应该像这样addData(data) {if (data.type == 'income')&nbsp; {&nbsp; &nbsp; let income=[...this.state.income];&nbsp; &nbsp; income.push(data);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; income:income&nbsp; &nbsp; })} else if (data.type == 'expense') {&nbsp; &nbsp; let expenses=[...this.state.expenses];&nbsp; &nbsp; expenses.push(data);&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; expenses:expenses&nbsp; &nbsp; });}&nbsp;}