将对象作为道具传递会干扰 componentWillReceiveProps 吗？

Question

我的 React 应用程序需要使用动态键跟踪配置对象，因此我将其传递给这样的组件：

<Component configuration={this.state.configuration}>

虽然这有效，但当我在组件的 componentWillReceiveProps(nextProps) 中时，我无法辨别配置更改，因为 this.props 已经更新为 nextProps。

如果这不是已知问题，可能与我处理父配置状态更新的方式有关？这是我更新配置状态的方法：

  handleConfigurationChangeForKey(newOption, key) {
    const configObject = this.state.configuration;
    configObject[key] = newOption;
    this.setState({configuration: configObject});
  }

在此先感谢您的帮助。

Answer 1

I cannot discern configuration changes, because this.props has already been updated to nextProps.

这不是真的。 this.props 将拥有当前道具，nextProps 即将推出的道具。

您设置状态的方式可能是问题所在。尝试创建一个新的配置对象，使用 Object.create 或深度复制功能（例如 lodash 提供的功能）。

const newConfig = Object.create(oldConfig)
# or
const newConfig = _.cloneDeep(oldConfig)

newConfig[key] = newValue

这样，引用旧版本的对象就不会相等。如果复制带来性能问题，您可以为您的状态对象尝试 Immutable.js 库。

Answer 2

当您更新配置对象时，您就是在改变它：您无法区分 nextProps.configuration 和 this.props.configuration，因为它们是同一个对象。

解决这个问题的方法基本上是克隆原始配置对象，改变 that，然后使用 setState 使配置指向那个新对象。

handleConfigurationChangeForKey(newOption, key) {
  const nextConfiguration = {
    ...this.state.configuration,
    [key]: newOption
  };
  this.setState({ configuration: nextConfiguration });
}

仅使用较旧的语言功能

handleConfigurationChangeForKey(newOption, key) {
  var nextConfiguration = {};
  nextConfiguration[key] = newOption;
  nextConfiguration = Object.assign(
    {},
    this.state.configuration,
    nextConfiguration
  );
  this.setState({ configuration: nextConfiguration });
}

将对象作为道具传递会干扰 componentWillReceiveProps 吗？

Does passing objects as props interfere with componentWillReceiveProps?

state

setstate

reactjs