生命周期-仅在加载完成后才获取数据

Question

我有一个组件，需要在提取数据之前先等待用户的令牌得到验证。现在，我的组件仅在authLoading为false时才呈现，但是我正在componentDidMount中获取数据，因此有时令牌尚未通过验证，并且出现了未经授权的错误。我应该如何重构它，以便所有内容都应等待authLoading完成？

componentDidMount() {
  // if (!authLoading) { <----- Sometimes the component mounts and the fetchData function doesn't get called
    this.fetchData();
  // }
}


render() {
  const { authLoading } = this.props;

  if (!authLoading) {
    return (
      <Component1 />
    );
  }
  else {
    return null
  }
}

Answer 1

您只希望获取一次数据，并且仅在this.props.authLoading变为假之后才获取。

[检出componentDidUpdate()，可让您在道具更改时随时进行更新。

您的实现可能看起来像这样：

componentDidUpdate(prevProps) {
  if (!this.props.authLoading && prevProps.authLoading) { // tokens just loaded!
    this.fetchData();
  }
}

Answer 2

如果您可以将组件转换为功能组件，那么使用钩子就很简单。

const MyComponent = ({ authLoading }) => {
  const [authLoaded, setAuthLoaded] = useState();
  useEffect(
    () => {
      fetchData();
      // process data
      setAuthLoaded(/* some value based on fetched data I assume */);
    },
    [authLoading], // triggers effect anytime value of `authLoading` changes
  );

  return authLoaded ? <Component1 /> : null;
};