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

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

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.addData=this.addData.bind（this）；
此.state={
费用：[]，
收入：[]，
}
}
添加数据（数据）{
如果（data.type==“收入”）{
this.setState（（prevState）=>{
收入：prevState.income.push（数据）；
}，console.log（this.state.income））；
}else if（data.type==“费用”）{
this.setState（（prevState）=>{
费用：prevState.expenses.push（数据）；
})
}
}
render（）{
返回(
);
}
}
//包含表单的UserInput组件
类UserInput扩展了React.Component{
建造师（道具）{
超级（道具）；
this.addDataLocal=this.addDataLocal.bind（this）；
}
addDataLocal（e）{
e、 预防默认值（）；
常数数据={
类型：e.target.elements.type.value，
描述：e.target.elements.description.value，
金额：e.target.elements.amount.value
}
this.props.addData（数据）；
}
render（）{
返回(
收入
费用
)
}
}
类IncomeList扩展了React.Component{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{
此.props.income.map（（项目）=>{
返回(
)
})
}
)
}
}

您不会从

此.setState返回任何内容。您需要返回一个要与当前状态合并的对象

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

你的addData应该是这样的

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


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