Reactjs React 组件 prop 更改时如何获取数据

发布于08月17日

我的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);
  }

如果我手动输入url，这一切都很好.如果我想使用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中之前的props 进行比较，以避免在你关心的特定props 没有改变的情况下获取props .

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);
   }
}