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

Question

我的 TranslationDetail 组件在打开时会传递一个 id，并基于此在类构造函数中触发外部 api 调用，将数据接收到 state，并将此数据显示在 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 调用。

我该如何解决这个问题？ 我是否需要列出道具并在更改时调用函数？如果是，怎么做？

Answer 1

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

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

• componentDidMount 运行初始提取。
• componentDidUpdate 拨打后续电话。

确保将 props 与 componentDidUpdate 中的先前 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);
   }
}

Answer 2

从 React 16.3 起，componentWillMount、componentWillUpdate 和 componentWillReceiveProps 是 deprecated。

您可以使用静态getDerivedStateFromProps 并根据道具的更改返回新状态。

您无权访问您的 this 对象（如 props），因此您无法通过 nextProps.sth !== this.props.sth 将 nextProps 与您当前的 props 进行比较。您可以将prevState 值与nextProps 进行比较，并返回新的状态值。

让您将UNSAFE_ 添加到您当前的componentWillMount 和其他已弃用的生命周期方法中。

Answer 3

我会使用渲染方法。如果未加载数据，我将渲染加载器微调器并抛出获取数据的操作。为此，我通常使用商店。一旦 store 有来自 api 的数据，将数据标记为已加载，抛出一个事件并让组件从 store 中获取数据，用您的数据表示替换加载器微调器。

Answer 4

使用componentWillMount 获取数据并设置状态。 然后使用 componentWillReceiveProps 捕获道具的更新。

您可以查看Component Specs and Lifecycle。