提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我无法理解为什么在将新的props传递给子组件时不更新在构造函数中初始化的变量。
当新的道具被发送到组件时，this.data仍然是旧道具的值。 （请注意，这只是一个示例，没有任何状态更改来演示，我知道使用状态是一种替代方法）
constructor(props) {
super(props)
this.data = this.props.receivedData
}
render() {
console.log(this.props.receivedData) -> prints new props data
console.log(this.data) -> retains old props data
return (
<svg
....
</svg>
)
}
仅在创建组件时（在其中分配值）才第一次调用构造函数。 下次您将以ComponenantWillReceiveProps(nextProps)方法接收道具。 尝试以下代码：
constructor(props) {
super(props)
this.data = this.props.receivedData;
}
ComponenantWillReceiveProps(nextProps){
if(this.props.receivedData !== nextProps.receivedData){
this.data = nextProps.receivedData;//new data will be updated here
}
}
render() {
console.log(this.props.receivedData)
console.log(this.data)
return (
<svg
</svg>
)
}
您可以使用状态来更新值并在收到新数据时呈现视图。
例如： -
constructor(props) {
super(props)
this.data = this.props.receivedData;
this.state = {
data : this.props.receivedData
};
}
ComponenantWillReceiveProps(nextProps){
if(this.props.receivedData !== nextProps.receivedData){
this.setState({data:nextProps.receivedData});//new data will be updated here
}
}
render() {
console.log(this.props.receivedData)
console.log(this.data)
return (
<div>{this.state.data}</div>
)
}
只是为了扩大其他答案。 根据您要尝试执行的操作，有不同的处理方法。 在其他答案说明的情况下，构造函数将只在组件的构造上运行一次。
现在，如果您要获取传入的道具并将其存储为状态，然后由于新道具getDerivedStateFromProps该状态得到更新，则可能需要getDerivedStateFromProps 。 但是，如果这是您想要的，那么首先要知道为什么要这样做是很重要的，因为您可能不需要这样做。 导致人们选择这种模式的一个常见原因是记忆道具，但是可以并且应该使用记忆库来实现。 您可以在此处了解更多信息。
选择此选项的另一个原因是，由于更改了道具，因此仅对组件进行了更新。 现在，您已在问题中暗示了这一点，但是为了清楚起见，您需要做的就是使用传入的道具，并且当它们更改时，组件也会随之更新。 换句话说，为了简单地渲染道具，没有理由将它们存储在状态或实例变量中。
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.