javascript - useEffect 没有在 Hoc 内部触发

Question

如果我的组件没有 HOC，它确实会触发，但现在我将组件包裹在 withSpinner Hoc 内部，但它不会触发获取开始。

const CollectionPage = (props) => {
  const { isCollectionLoaded, isCollectionFetching } = props;

  useEffect(() => {
    props.fetchCollectionsStart();
  }, []);
  const { title, items } = props.collection;

  return (
    <div className="collection-page">
      <SearchBar />
      <h2 className="title">{title} </h2>

      <div className="items">
        {items.map((item) => (
          <CollectionItem key={item.id} {...props} item={item} />
        ))}
      </div>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => ({
  collection: selectCollection(ownProps.match.params.collectionId)(state),
  isCollectionFetching: selectIsCollectionFetching(state),
  isCollectionLoaded: selectIsCollectionsLoaded(state),
});

export default WithSpinner(
  connect(mapStateToProps, { fetchCollectionsStart })(CollectionPage)
);

这是状态的控制台。

这是 withSpinner Hoc：

const WithSpinner = (WrappedComponent) => ({
  isCollectionLoaded,
  ...otherProps
}) => {
  return !isCollectionLoaded ? (
    <SpinnerOverlay>
      <SpinnerContainer />
    </SpinnerOverlay>
  ) : (
    <WrappedComponent {...otherProps} />
  );
};

export default WithSpinner;

正如您从图像中看到的那样，我只看到微调器正在旋转，因为 fetchCollectionStart 没有触发，所以 redux 存储没有更新。

标签： javascriptreactjsreact-hookshigh-order-component

Answer 1

isCollectionLoadedfetchCollectionsStart一旦调度完成并且 redux 状态更新，这将是真的（我怀疑） 。

但是你有一个问题，fetchCollectionsStart只在 mount 阶段调度，因为默认情况下是 false 并且blocks CollectionPage，所以永远不会发生。isCollectionLoadedWithSpinnerCollectionPage

我建议将调度 useEffect 移动到 Spinner Hoc，考虑到您的代码结构，这很有意义。您的 hoc 可能类似于：

const WithSpinner = (WrappedComponent) => ({
  isCollectionLoaded,
  fetchCollectionsStart,
  ...otherProps
}) => {

    useEffect(() => {
    fetchCollectionsStart();
  }, []);

  return !isCollectionLoaded ? (
    <SpinnerOverlay>
      <SpinnerContainer />
    </SpinnerOverlay>
  ) : (
    <WrappedComponent {...otherProps} />
  );
};

export default WithSpinner