繁体   English   中英

反应:当新的道具传递给组件时,构造函数中声明的this.var不会更新

React: this.var declared in constructor is not updated when new props is passed to component

提示:本站收集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>
    )
  }
3 个回复

传递新的prop时,构造函数不会再被调用。 过去,您会陷入componentWillReceiveProps生命周期方法中。 但是,最近认为这是不好的getDerivedStateFromProps ,您应该改用getDerivedStateFromProps方法。

参见官方文档

本文在解释它方面做得不错。

仅在创建组件时(在其中分配值)才第一次调用构造函数。 下次您将以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 但是,如果这是您想要的,那么首先要知道为什么要这样做是很重要的,因为您可能不需要这样做。 导致人们选择这种模式的一个常见原因是记忆道具,但是可以并且应该使用记忆库来实现。 您可以在此处了解更多信息

选择此选项的另一个原因是,由于更改了道具,因此仅对组件进行了更新。 现在,您已在问题中暗示了这一点,但是为了清楚起见,您需要做的就是使用传入的道具,并且当它们更改时,组件也会随之更新。 换句话说,为了简单地渲染道具,没有理由将它们存储在状态或实例变量中。

2 通过新道具时,反应子组件状态不会更新

我正在渲染一个自定义模态组件,该组件基于从父组件传入的道具进行显示。 isVisible最初为false ,然后通过按钮在父组件中更新。 我正在通过render函数中的console.log语句检查组件状态。 首次初始化组件时,按预期记录false false ,但是更新isVisible ...

5 道具未传递到React组件

我正在尝试将一些值作为道具传递给我拥有的一个组件(产品)。 看来当我console.log(JSON.stringify(props))时,结果是:{}。 我可能做错了什么? 这是我的产品构造函数: ...

9 setState()之后,更新后的状态不作为道具传递给组件

我有一个名为“ App”的主要React组件,其中包含处于其状态的用户输入数据。 每次用户输入新数据时,都会使用setState()更新状态。 然后将状态作为道具传递给另一个名为“ IncomeList”的组件,该组件将数据呈现在屏幕上。 但是,在用户输入一些数据后,IncomeList组 ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM