Question

My 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

我无法识别配置更改，因为this.props已更新为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之间的区别，因为它们是相同的对象。

解决这个问题的方法是基本克隆原始配置对象，改变那个，然后使用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？

2 个答案: