在父组件的状态更改中重新呈现子组件(代码片段)

关键词：

updateCount(data) 
    // Logic to update state of a counter variable
    this.setState( count: data )


// and then later on in the code, I'm calling the child Component 'B'        
<B prop=this.state.count />

componentWillMount() 
// based on value of this.props.count, I'm setting the value of 'text' in this component
    if(this.props.count == 1) 
       this.setState(text: 'abc')
     else 
       this.setState(text: 'cde')
    


// later on in the code, render method:
<View>
   <Text>
     this.state.text
   </Text>
</View>

更新组件B :(以下代码）

    constructor(props) 
            super(props);
            this.state = 
                count: props.count
            ;
         

        componentWillReceiveProps(nextProps) 
           if (nextProps.count != this.props.count)
                this.setState(
                count: nextProps.count
            )
          
        

       componentDidMount() 
             this.setTextValue();
       

         componentWillUpdate() 
             this.setTextValue();
       

         setTextValue = () => 
           if(this.state.count == 1) 
               this.setState(text: 'abc')
            else 
              this.setState(text: 'cde')
            
         

包括其余代码。

研究很好地反应lifecycle methods。

回答我的问题是因为我意识到我没有更新组件代码中的prop值以反映父元素状态的变化。

我想这就是为什么我在第一时间如此困惑，因为重新渲染国家的变化是React工作的核心。我使用react-devtools来调试并计算出我的Child组件的生命周期。现在一切正常！不知道我是否需要钩子/其他生命周期方法来实现这个简单的功能，但我感谢大家的帮助！

您必须使用componentDidUpdate。但是，如果使用钩子，那将会淘汰componentDidMount和componentDidUpdate。对于基于类的示例，它可能与此类似。

    componentdidUpdate(prevProps, props) => 
      if(prevProps.count !== this.props.count)
    if(this.props.count == 1) 
      this.setState(text: 'abc')
       
        else 
     this.setState(text: 'cde')
      

但是，根据文档，这些方法被认为是遗留的，您应该在新代码中避免使用它们：

UNSAFE_componentWillMount（）

删除它有利于componentDidMount和componentDidUpdate，或切换到钩子（这是最好的选择！）

在 Safari 中状态更改后，React 组件不会重新呈现

】在Safari中状态更改后，React组件不会重新呈现【英文标题】：Reactcomponentdoesn\'trerenderafterstatechangeinSafari【发布时间】：2021-01-1217:50:26【问题描述】：在我在Gatsby中构建的React应用程序中，我的表单包含以下代码片段：<labelid="p... 查看详情

在父组件的值更改时更新子组件中的值

】在父组件的值更改时更新子组件中的值【英文标题】：Updatingvalueinthechildcomponent,onvaluechangesintheparentcomponent【发布时间】：2019-07-2823:37:05【问题描述】：我在Angular工作，在哪里-我正在尝试在值更改时更新子组件中的值在父组件... 查看详情

道具更改时Vue子组件没有重新渲染？

】道具更改时Vue子组件没有重新渲染？【英文标题】：Vuechildcomponentdidn\'trerenderwhenpropschanged?【发布时间】：2018-12-3021:10:33【问题描述】：在我的应用程序中，我使用vuex来管理我的组件状态，当状态改变时vuex突变，子组件没有重... 查看详情

React 功能组件在重新挂载后停止渲染状态更改

】React功能组件在重新挂载后停止渲染状态更改【英文标题】：Reactfunctionalcomponentstopsrenderingonstatechangesafterremounting【发布时间】：2021-12-2217:04:38【问题描述】：对于这种奇怪情况的任何建议将不胜感激。我有一个父组件，它监听... 查看详情

React-redux 组件不会在存储状态更改时重新呈现

】React-redux组件不会在存储状态更改时重新呈现【英文标题】：React-reduxcomponentdoesnotrerenderonstorestatechange【发布时间】：2016-12-0507:38:28【问题描述】：我今天说要学习react和redux，但我不知道如何在状态更改后强制组件重新渲染。... 查看详情

React 功能组件中状态更改后组件未重新渲染

】React功能组件中状态更改后组件未重新渲染【英文标题】：ComponentnotrerenderingafterstatechanginginReactfunctionalcomponent【发布时间】：2020-07-2815:56:15【问题描述】：我正在尝试使用来自另一个文件的数组创建一个带有ReactuseState的推荐... 查看详情

反应无状态子组件不会更新父组件中的状态更改

】反应无状态子组件不会更新父组件中的状态更改【英文标题】：reactstatelesschildcomponentsdonotupdateonstatechangeinparentcomponent【发布时间】：2018-11-0303:57:33【问题描述】：我正在构建一个小型选项卡式应用程序，其中每个选项卡呈现... 查看详情

如何在状态更改（父）reactjs时重新渲染子组件

】如何在状态更改（父）reactjs时重新渲染子组件【英文标题】：howtore-renderchildcomponentonstatechange(Parent)reactjs【发布时间】：2018-08-1404:14:14【问题描述】：我有一个数组列表登录返回初始数组的子组件。从API更改数据后componentDidMou... 查看详情

React：父组件重新渲染所有子组件，即使是那些在状态更改时没有更改的子组件

】React：父组件重新渲染所有子组件，即使是那些在状态更改时没有更改的子组件【英文标题】：React:Parentcomponentre-rendersallchildren,eventhosethathaven\'tchangedonstatechange【发布时间】：2017-04-1017:46:07【问题描述】：我一直没能找到明确... 查看详情

使用 React 在父组件中公开子组件的状态和方法

】使用React在父组件中公开子组件的状态和方法【英文标题】：ExposestateandmethodofchildComponentinparentwithReact【发布时间】：2022-01-1201:18:06【问题描述】：我知道这样做不是一个好的模式，但你会明白我为什么要这样做。我有一个HTabl... 查看详情

React 子组件不会在其状态更改时重新渲染

】React子组件不会在其状态更改时重新渲染【英文标题】：Reactchildcomponentdonotre-renderonitstatechange【发布时间】：2017-10-0420:56:55【问题描述】：我有一个返回其他组件的任务组件。但是，当我从Tasks组件更改子组件之一的状态时，... 查看详情

React 子组件在父组件中更新状态后如何将其重置回原始状态

】React子组件在父组件中更新状态后如何将其重置回原始状态【英文标题】：HowcanresetaReactchildcomponentbacktooriginalstateafteritupdatesstateintheparent【发布时间】：2020-04-2713:28:01【问题描述】：我是React的新手，并试图模仿以下场景的更复... 查看详情

React Native - 直接在父组件上设置子组件的状态

】ReactNative-直接在父组件上设置子组件的状态【英文标题】：ReactNative-Setsthestateofthechildcomponentdirectlyontheparentcomponent【发布时间】：2021-03-2110:53:51【问题描述】：我想问一个问题。在我遇到的情况下，我有很多内部使用状态的组... 查看详情

vue父组件调用子组件方法(代码片段)

用了这么久vue，一直不知道在父组件还可以调用子组件的方法，唉，说出来都有点不好意思。直到今天看别的项目才发现，诶这个方法是哪里的，一查才看到在父组件里面的，那这样传值不是就更方便了吗，蜜汁微笑，哈哈哈这... 查看详情

react组件的数据传递(代码片段)

...件的方法在子组件中使用父组件的方法，需要分成3步：在父组件中定义方法；在调用子组件的时候绑定该方法在子组件中使用该方法。我们将上面的代码稍作调整，在父组件Header.js中定义一个执行打印语句的方法 然后在调... 查看详情

vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题(代码片段)

　　ScopedCSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。　　vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素，它是通过使用PostCSS来改变以下内容实现的：<stylescoped>.examp... 查看详情

仅在父组件的挂载中完成异步方法后才渲染子组件

】仅在父组件的挂载中完成异步方法后才渲染子组件【英文标题】：Renderachildcomponentonlyafterasyncmethodiscompletedinparent\'smounted【发布时间】：2020-07-1017:14:27【问题描述】：我有一个渲染子组件的父组件。我正在从父组件的mounted内部... 查看详情

vue$emit子组件传出多个参数，如何在父组件中在接收所有参数的同时添加自定义参数(代码片段)

前言很多时候用$emit携带参数传出事件，并且又需要在父组件中使用自定义参数时，这时我们就无法接受到子组件传出的参数了。找到了两种方法可以同时添加自定义参数的方法。方法一子组件传出单个参数时：//子组件this.$emit(... 查看详情