如何在reactjs中重新渲染新的价值？

问题描述：

this.state={ 
    value: 'v1', 
    newValue: '', 
} 

componentDidMount =() => { 
    let nV = this.state.value + 'received'; 
    this.setState({ 
    newValue: nV, 
    }); 
} 

tabClick = (val) => { 
    this.setState({ 
    value: val, 
    }); 
} 

render() { 
    return (
    <Tabs onTabClick={this.tabClick}> 
     <Tab val='v2'> 
     {this.state.newValue} 
     </Tab> 
     <Tab val='v3'> 
     {this.state.newValue} 
     </Tab> 
    </Tabs> 
) 
}

这是我正面临的问题的一个示例场景。当程序第一次加载时，它显示在活动标签v1 received中。当我点击不同的标签时，我改变了value的状态值，并期待componentDidMount启动并更改newValue，它将更改每个选项卡的值。但是当我点击标签没有任何反应。帮助将是非常赞赏:)如何在reactjs中重新渲染新的价值？

你能分享这一类的完整代码？我注意到一些问题，但首先我想知道'this.tabClick'是否真的被执行。 – Win

是的，这是我通过日志记录检查:) –

把此内部'tabClick'，'this.state'：'alert（val）'之前。让我知道结果。 – Win

答

为什么不能做这种方式

this.state={ 
    value: 'v1', 
    newValue: 'v1 received', 
} 

tabClick = (val) => { 
     let nV = val + 'received'; 

     this.setState({ 
     value: val, 
     newValue: nV 
     }); 
    }

它的一个类似的情况下，我的实际程序，我不能这样做:) –

@Shockwave设置您的初始'newValue'为'v1收到'像更新的答案那么应该按你的意思工作。 – abdul

答

你应该设置任何国家在componentWillMount（）函数，而不是componentDidMount（）。

在安装发生之前立即调用前一个生命周期函数。它在render（）之前被调用，因此，在这里改变你的状态是理想的。

当您需要调用功能从远程端点加载数据时，最好使用后者。在渲染函数之后调用componentDidMount（），并且如果在此函数中更改了状态，则会再次调用render（）函数。

参考： https://facebook.github.io/react/docs/react-component.html#componentwillmount https://facebook.github.io/react/docs/react-component.html#componentdidmount

tabClick已因箭头功能而粘合 - 请看这里http://blog.andrewray.me/react-es6-autobinding-and-createclass/（解决方案4：脂肪箭类方法） –

@KnutHerrmann非常感谢您的支持。我现在已经更好地理解了这个关键字的作用。我会相应地更新我的评论。 –

如何在reactjs中重新渲染新的价值？

相关推荐