javascript – 如何在React组件prop更改时获取数据？

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 如何在React组件prop更改时获取数据？，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1256字，纯文字阅读大概需要2分钟。

内容图文

我的TranslationDetail组件在打开时传递一个id,并且基于此,在类构造函数中触发外部api调用,将数据接收到状态,并且此数据显示在TranslationDetail上.

//Routing:
<Route path="/translation/:id" component={TranslationDetail}/>

//Class:    
class TranslationDetail extends Component {
  constructor(props){
    super(props);

    this.props.fetchTrans(this.props.params.id);
  }

如果我手动输入网址,这一切都正常.如果我想使用react-router,例如为了显示下面的下一个项目,url确实发生了变化,但是没有触发api调用,数据将保持不变.

<button 
  type="button"
  onClick={() => 
    browserHistory.push(`/translation/${Number(this.props.params.id)+1}`)}>
  Next
</button>

请记住,我是一个初学者.发生这种情况的原因是我认为构造函数只运行一次,因此不会触发进一步的api调用.

我怎么解决这个问题？
我是否需要列出道具并在变更时调用函数？如果有,怎么样？

解决方法:

构造函数不是进行API调用的正确位置.

您需要使用生命周期事件：

> componentDidMount运行初始提取.
> componentDidUpdate进行后续通话.

确保将props与componentDidUpdate中的先前道具进行比较,以避免在您关注的特定道具未发生变化时进行抓取.

class TranslationDetail extends Component {    
   componentDidMount() {
     this.fetchTrans();
   }

   componentDidUpdate(prevProps) {
     if (prevProps.params.id !== this.props.params.id) {
       this.fetchTrans();
     }
   }

   fetchTrans() {
     this.props.fetchTrans(this.props.params.id);
   }
}

内容总结

以上是互联网集市为您收集整理的javascript – 如何在React组件prop更改时获取数据？全部内容，希望文章能够帮你解决javascript – 如何在React组件prop更改时获取数据？所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---