Question

我尝试在输入新员工数据时更新状态。但是push函数没有将新员工数据插入状态。在addpar函数中我已经设置了console.log并且它显示数据在那里但它没有把它推到州

 // this class will hold the table and the form 

class EmpContainer extends React.Component{
    constructor(props) {
      super(props);
    // the state will have the following data by default 
      this.state = {participants : [
                    {   id: '1',
                        name: 'Dani', 
                        email: 'dani@hotmail.com',
                        phone: '0443322118'
                    },
                    {   id: '2',
                        name: 'Dani', 
                        email: 'dani@hotmail.com',
                        phone: '0443322118'
                    }
                ]};
    }

    // this supposed to add the new employed data to the state
    addPar (emp){
    console.log(emp); // this shows the new employee data 

    this.state.participants.push(emp);
       this.setState({
         participants: this.state.participants
       });}
render() {
        return (
            <div>
             <AddNewParticipant addNew={this.addPar}/>
            </div>
        );}
}

Answer 1

我现在将其复制到an answer to the dupetarget并将其作为CW;这是根据您的代码量身定制的版本。

两个问题：

您不直接在React中改变状态对象。相反，通过setState提供 new 数组，其中包含新条目。
根据现有状态更新状态时，请使用setState的函数回调版本，而不是接受对象的版本，因为状态更新是异步的，可以合并。

React文档中的更多内容：Using State Correctly（“不要直接修改状态”和“状态更新可能是异步”部分）。

所以：

addPar(emp) {
    this.setState(function(state) {
        return {
            participants: [...state.participants, emp]
        }
    });
}

或者使用简洁的箭头（我们需要身体表达式周围的()，因为我们正在使用对象初始值设定项，而{似乎会启动一个详细的函数体：）

addPar(emp) {
    this.setState(state => ({
        participants: [...state.participants, emp]
    }));
}

国家没有反应更新

1 个答案: