即使使用了散布运算符，原始对象也会被修改

Question

我正在开发一个React应用程序，其中您有一个表单，可以在其中添加新员工和X个受抚养人。

在表单中，我设置如下默认状态：

class NewEmployee extends Component {
  state = {
    employees: [],
    costEstimates: { ...emptyCosts },
    relationshipOptions: [],
    newEmployee: { ...emptyEmployee }
  };

emptyEmployee来自单独文件中的const，看起来像这样：

export const emptyEmployee = { firstName: '', lastName: '', dependents: [] };

我这样做仅仅是为了使代码的初始状态保持整洁。

我的问题是dependents中的emptyEmployee数组正在被修改，我不知道该怎么做。当用户单击以添加新的依赖项时，将调用此函数：

  handleNewDependent = () => {
    const newEmployee = { ...this.state.newEmployee };
    // blank dependent for now
    const dependent = {
      firstName: '',
      lastName: ''
    };

    newEmployee.dependents.push(dependent);

    this.setState({ newEmployee });
  };

我已经指出这是我的dependents对象的emptyEmployee数组被修改的时间。我不知道该怎么做，因为我使用了传播算子进行复制。