Javascript 未使用React中的set State menthod更新状态

背景：我试图在React中创建一个员工花名册生成器，目前只处理静态数据。我的应用程序的设置方式是-2个主要组件home.js（父级）和employee.js（子级）。 我正在将静态数据（从json文件）复制到我的主组件状态。国家结构是这样的：

this.state = {
      employeeData: employeeData,
      Header: Header,
    };

employeeData是一个对象数组。 现在，employee组件包含了我的表单，它是为所有在场的员工呈现的。i、 e在employeeData上使用映射函数，并将单个employee对象作为道具传递。 我从employee组件获取输入，并将其作为单个对象使用handleCallback方法传递给home组件。在handleCallback中，我使用一个简单的循环将员工的姓名与接收到的对象匹配，然后用接收到的对象数据更新我的状态。然而，似乎setState方法不起作用，状态保持不变。 欢迎提出任何建议

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      employeeData: employeeData,
      Header: Header,
    };
  }
  handleCallback = (e) => {
    this.state.employeeData.map((em) => {
      if (em.name === e.name) {
        this.setState({em:e}); 
      }
    });
    
  };

  render() {
    return (
      <div>
        <h1>This is Home Component</h1>
        {this.state.employeeData.map((employee) => {
          return (
            <div>
              <div>
                <Employee
                  employee={employee}
                  handleCallback={this.handleCallback}
                />
              </div>
            </div>
          );
        })}
        <div>
          <CSVReport
            employeedata={this.state.employeeData}
            Header={this.state.Header}
          ></CSVReport>
        </div>
      </div>
    );
  }
}


class Employee extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      age: "",
      monday: "",
      tuesday: "",
      wednesday: "",
    };
    // this.handleChange = this.handleChange.bind(this);
    // this.generateRoster = this.generateRoster.bind(this);
  }

  setShift = (event) => {
    event.preventDefault();
    this.props.handleCallback(this.state)
  };
  onChange = (event) => {
    this.setState({
      [event.target.name]: event.target.value,
      name: this.props.employee.name,
      age: this.props.employee.age,
    });
  };

  render() {
    return (
      <div>
        <h1>This is Employee Component</h1>
        <h2>{this.props.employee.name}</h2>
        <form>
          <div id={this.props.employee.name}>
            <select name="monday" onChange={this.onChange}>
              <option value="General">"General"</option>
              <option value="Night">"Night"</option>
              <option value="Second">"Second"</option>
              <option value="NoShift">"NoShift"</option>
            </select>
            <select name="tuesday" onChange={this.onChange}>
              <option value="General">"General"</option>
              <option value="Night">"Night"</option>
              <option value="Second">"Second"</option>
              <option value="NoShift">"NoShift"</option>
            </select>
            <select name="wednesday" onChange={this.onChange}>
              <option value="General">"General"</option>
              <option value="Night">"Night"</option>
              <option value="Second">"Second"</option>
              <option value="NoShift">"NoShift"</option>
            </select>
          </div>
          <div>
            <button onClick={this.setShift}>Set Shift</button>
          </div>
        </form>
      </div>
    );
  }
}

class Home扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
雇员数据：雇员数据，
标题：标题，
};
}
handleCallback=（e）=>{
this.state.employeeData.map（（em）=>{
如果（em.name==e.name）{
this.setState（{em:e}）；
}
});
};
render（）{
返回(
这是Home组件
{this.state.employeeData.map（（employee）=>{
返回(
);
})}
);
}
}
类Employee扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
姓名：“，
年龄：“，
星期一：，
星期二：，
星期三：，
};
//this.handleChange=this.handleChange.bind（this）；
//this.generateRoster=this.generateRoster.bind（this）；
}
设置档位=（事件）=>{
event.preventDefault（）；
this.props.handleCallback（this.state）
};
onChange=（事件）=>{
这是我的国家({
[event.target.name]：event.target.value，
名称：this.props.employee.name，
年龄：this.props.employee.age，
});
};
render（）{
返回(
这是Employee组件
{this.props.employee.name}
“一般”
“晚上”
“第二”
“无移位”
“一般”
“晚上”
“第二”
“无移位”
“一般”
“晚上”
“第二”
“无移位”
轮班
);
}
}