Question

我在组件componentWillMount（）部分中进行了api调用。当我从其他组件重定向到放置api调用的组件时。然后，它不会在componentWillMount部分中进行。那么reactjs中是否有任何函数可以强制重新加载我的组件，该组件将调用我的componentWillMount函数？

注意：我尝试了this.forceUpdate和ShouldComponentUpdate方法。但似乎不适用于我。

Answer 1

componentWillUpdate已过时。您应该在componentDidMount中进行初始API调用。您可以在componentDidUpdate(prevProps)中进行后续通话，在此您将可以使用新旧道具。然后，当父组件传递不同的道具时，您可以再次进行API调用。

例如，如果您由于用户ID更改而要进行新的API调用：

componentDidUpdate(prevProps) {

  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

父组件负责传递指示是否需要更新的道具。

如果您确实要“强制”更新，则可以传入forceUpdate={true}之类的信息，但是最好传递任何表明需要刷新的信息，并在组件本身中包含条件逻辑。

Answer 2

如果该组件是“路由”组件，它将具有来自路由器的道具，这些道具将在路由器更新时发生变化，这使您可以使用componentDidUpdate生命周期功能来发送新请求。

请小心添加位置更改是导致组件更新的原因，或者您设置的新状态将导致无限循环

componentDidUpdate(prevProps) {
  if (prevProps.location !== this.props.location) {
    // send new api requests
  }
}

如果它不是路线组件，则需要使用withRouter为其提供正确的道具。

Answer 3

在类中提取用于进行API调用的代码，然后在componentWillMount上（最好在componentDidMount上调用，因为在最新的React版本中不推荐使用第一个）您需要在其中重新获取数据的地方。

例如：

export class MyRouteComponent extends React.Component {
  state = {
    data: null;
  }

  componentDidMount () {
    this.fetchData();
    // Other stuff when component is mounted.
  }

  componentDidUpdate (prevProps) {
    if (prevProps.location !== this.props.location) {
      // Update data on route change.
      this.fetchData();
    }
  }

  async fetchData () {
    const res = await fetch(...);
    const data = await res.json();
    this.setState({ data });
  }

  render () {
    const { data } = this.state;
    return (
      <React.Fragment>
        {data == null ? (
          <p>Data is loading...</p>
        ) : (
          <pre>{JSON.stringify(data, null, 2)}</pre>
        )}
      </React.Fragment>
    )
  }
}

对于您而言，您可以检查道具（即使用getDerivedStateFromProps或componentWillReceiveProps / componentDidUpdate），然后调用this.fetchData()，以便它确实重新获取您的数据。

希望这会有所帮助。

编辑：更新了示例，因为该问题似乎与react-router

有关

如果状态没有变化，则强制重新加载react js组件

3 个答案: