React：props更新时如何将对象属性存入子组件state并直接访问

当然可行，但你当前遇到的问题是组件挂载时仅初始化了一次state，props更新后没有同步到state——毕竟构造函数只会在组件第一次挂载时执行，之后props变化不会自动触发state更新。我来帮你一步步解决这个问题：

为什么你的代码没生效？ #

你在构造函数里用this.state = { ...props.clockInfo, ...props.gameState };初始化了state，但这只是一次性操作。当父组件调用setState更新gameState后，子组件会接收到新的props，但不会自动更新state，所以你的子组件state还是旧值。

另外，你注释掉的componentWillReceiveProps代码有语法错误：setState需要接收一个对象，正确写法应该是this.setState({...this.props.clockInfo, ...this.props.gameState})，而且这个钩子已经被React官方废弃了，不建议继续使用。

解决方案1：用getDerivedStateFromProps同步props（推荐） #

这是React官方推荐的用于从props派生state的方法，它是静态方法，会在组件挂载和每次props更新时触发：

static getDerivedStateFromProps(nextProps, prevState) {
  // 对比新props和旧state，只有当props变化时才更新state
  const hasClockInfoChanged = JSON.stringify(nextProps.clockInfo) !== JSON.stringify(prevState.clockInfo);
  const hasGameStateChanged = JSON.stringify(nextProps.gameState) !== JSON.stringify(prevState.gameState);
  
  if (hasClockInfoChanged || hasGameStateChanged) {
    return {
      ...nextProps.clockInfo,
      ...nextProps.gameState
    };
  }
  // 没有变化则返回null，不更新state
  return null;
}

注：这里用JSON.stringify做简单对比，如果你知道具体哪些属性会变，也可以直接对比单个属性（比如nextProps.gameState.gameStarted !== prevState.gameStarted），性能更好。

解决方案2：用componentDidUpdate同步props #

如果你更习惯类组件的生命周期写法，也可以用componentDidUpdate，但一定要加条件判断，避免无限循环：

componentDidUpdate(prevProps) {
  // 对比前后props，只有变化时才更新state
  const clockInfoChanged = JSON.stringify(prevProps.clockInfo) !== JSON.stringify(this.props.clockInfo);
  const gameStateChanged = JSON.stringify(prevProps.gameState) !== JSON.stringify(this.props.gameState);
  
  if (clockInfoChanged || gameStateChanged) {
    this.setState({
      ...this.props.clockInfo,
      ...this.props.gameState
    });
  }
}

额外优化建议 #

1. 避免不必要的state同步：如果你的state只是props的镜像（没有自己的修改逻辑），完全可以直接在render里解构props使用，省去同步的麻烦：

render() {
  // 合并两个props并解构
  const { time1, time2, myTurn, gameStarted } = { ...this.props.clockInfo, ...this.props.gameState };
  
  // 时间格式化可以封装成函数，让代码更清晰
  const formatTime = (time) => {
    const minutes = Math.floor(time / 60);
    const seconds = time % 60;
    return `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
  };
  
  return (
    <div className="row text-center w-100 GUI_clocks">
      <div className="h2 col">{formatTime(time1)}</div>
      <div className="h2 col">{formatTime(time2)}</div>
    </div>
  );
}

2. 函数式更新state：在startStopClock里修改时间时，建议用函数式setState，避免异步更新导致的state不一致问题：

this.setState(prevState => ({
  time1: prevState.time1 - 1
}));

这样修改后，当父组件更新props时，子组件的state就会同步更新，你也能继续用this.state.time1这种简洁的方式访问属性啦～

内容的提问来源于stack exchange，提问作者smutny1221