如何修改React组件Prop内部属性且不影响父组件状态？

这事儿我太有共鸣了！你遇到的核心问题是引用类型的传址特性——React说props不可变，指的是你不能直接替换props的引用（比如this.props.pState = {}会报错），但如果props是对象、数组这类引用类型，它们的内部属性存在堆内存里，父组件的state和子组件的props指向的是同一个内存地址。所以你修改props的内部属性时，本质是在操作原对象，父组件的state自然会跟着变化。

至于在线工具里父组件值没改变，大概率是工具环境做了特殊处理（比如严格模式下的重复渲染拦截，或者自动做了浅拷贝），但实际项目里的引用共享才是真实的JS运行逻辑。

要实现“修改Prop内部属性但不影响父组件状态”，有几种靠谱的方式：

1. 父组件传参时创建对象副本 #

在把state传给子组件的时候，直接生成一个新的对象，这样子组件拿到的是独立的引用：

// 父组件render里修改传参
render() {
  return(
    <div>
      Parent:{JSON.stringify(this.state.myState)}
      {/* 用展开运算符创建浅拷贝 */}
      <ChildComp pState={{...this.state.myState}} />
    </div>
  );
}

也可以用Object.assign实现同样的浅拷贝效果：

<ChildComp pState={Object.assign({}, this.state.myState)} />

2. 子组件内部先复制props再修改 #

如果不想改动父组件的传参逻辑，就在子组件里先把props对象复制一份，再修改副本：

class ChildComp extends React.Component {
  render() {
    // 创建props对象的浅拷贝
    const pStateCopy = {...this.props.pState};
    // 修改副本的属性
    pStateCopy.someProperty = '1234';
    return(
      <div>
        Child:{JSON.stringify(pStateCopy)}
      </div>
    );
  }
}

3. 深拷贝处理嵌套对象 #

如果你的state对象是多层嵌套的（比如{someProperty: {innerKey: 'value'}}），浅拷贝只能复制第一层属性，内部的引用还是共享的。这时候需要用深拷贝：

• 简单场景可以用JSON.parse(JSON.stringify())（注意：不能处理函数、Symbol等不可序列化的类型）：

  const pStateCopy = JSON.parse(JSON.stringify(this.props.pState));
  

• 复杂场景可以用第三方库（比如lodash的_.cloneDeep），或者自己实现递归深拷贝函数。

额外建议：遵循React单向数据流规范 #

虽然上面的方法能解决你的问题，但从React的设计理念来说，子组件不应该修改props（哪怕是内部属性）。如果子组件需要修改数据，更规范的做法是：

1. 父组件定义一个更新state的回调函数
2. 把这个函数作为props传给子组件
3. 子组件通过调用回调函数，让父组件自己更新state

举个例子：

// 父组件
class ParentComp extends React.Component {
  constructor(props) {
    super(props);
    let property = {someProperty:'ABCD'};
    this.state={ myState: property }
  }

  // 定义更新state的方法
  updateMyState = (newValue) => {
    this.setState(prevState => ({
      myState: {...prevState.myState, someProperty: newValue}
    }));
  }

  render() {
    return(
      <div>
        Parent:{JSON.stringify(this.state.myState)}
        <ChildComp 
          pState={this.state.myState} 
          updateState={this.updateMyState} 
        />
      </div>
    );
  }
}

// 子组件
class ChildComp extends React.Component {
  render() {
    // 调用父组件的回调函数来更新数据
    this.props.updateState('1234');
    return(
      <div>
        Child:{JSON.stringify(this.props.pState)}
      </div>
    );
  }
}

这样既符合React的单向数据流，也能避免意外的状态污染。

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