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

我的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,reactjs,react-router
来源： https://codeday.me/bug/20191003/1851184.html