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

Question

I have a main react component called 'App' which contain user input data in its state. The state is updated with setState() every time user enter new data. Then the state is passed as props to another component called 'IncomeList' which render the data on screen. However the IncomeList component is not getting updated state after user input some data.

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

You don't return anything from this.setState . You need return an object to be merged with your current state.

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

Answer 2

your addData should be like this

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

Answer 3

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

JS小提琴