React - 通过存在对象属性覆盖状态

Question

我有使用空字符串初始化的属性的状态，因为我将它们放入表单输入中。另外，我从 Firebase 获取具有与状态匹配的属性但并非每个都存在的对象。如果属性存在，我将通过该对象的属性设置状态属性。

这是必要的例子：

class App extends Component {
  state = {
      user: {
        firstName: "",
        lastName: "",
        gender: "",
        address: {
          street: "",
          city: "",
          state: ""
        }
      }
  }
  componentDidMount(){
    const newObjectFromFirebase = {
      firstName: "Lucas",
      address: {
        city: "London"
      }
    }
    this.setState(newObjectFromFirebase);
  }
  render() {
    const stateJson = JSON.stringify(this.state);
    return (
      <div className="App">
      {stateJson}
      </div>
    );
  }
}

我想仅在来自 firebase 的对象中存在的这些属性中获取具有覆盖属性的状态。否则我想保持以前的状态。当前状态属性完全被新对象覆盖。

这就是我想要的：

user: {
        firstName: "Lucas",
        lastName: "",
        gender: "",
        address: {
          street: "London",
          city: "",
          state: ""
        }
      }

这就是我所拥有的：

user: {
        firstName: "Lucas",
        address: {
          city: "London",
        }
      }

任何智能解决方案或库？

Answer 1

你可以像这样使用扩展语法...：

const newObjectFromFirebase = {
  firstName: "Lucas",
  address: {
    city: "London"
  }
}
this.setState(prevState => {
    user: {
        ...prevState.user,
        ...newObjectFromFirebase,
        address: {
            ...prevState.user.address,
            ...newObjectFromFirebase.address
        }
    }
});

这会将 2 个对象合并在一起并覆盖状态。