Question

我有一个组件，如果其加载状态为true，则返回加载标记，如果id为false，则返回其他内容。

但是我得到了错误：

React Hook is called conditionally. React Hooks must be called in the exact same order in every component render.

解决此问题的正确方法是什么？

我的组件

  const store = React.useContext(StoreContext);
  const [loading, setLoading] = useState(false)
  if(loading) {
    return <p>Loading...</p>
  }
  return useObserver(() => (
    <div className="pa2">
      <div className="flex">
        {store.restaurantResults[store.selectedFood] &&
          store.restaurantResults[store.selectedFood].map((rest, i) => {
            return (
              <div key={i} className="pa2">
                <img src={rest.image_url} alt="restuarant" />
                <p>Reviews{rest.review_count}</p>
              </div>
            );
          })}
      </div>
    </div>
  ));
};```

Answer 1

由于useObserver()是一个钩子，您必须在每个渲染器中调用它，因此不能有条件地跳过它。

如果可以的话，一种选择是将条件移到hook回调中：

  return useObserver(() => (
    loading 
      ? <p>Loading...</p>
      : <div className="pa2">
          <div className="flex">
            {store.restaurantResults[store.selectedFood] &&
             store.restaurantResults[store.selectedFood].map((rest, i) => {
               return (
                 <div key={i} className="pa2">
                   <img src={rest.image_url} alt="restuarant" />
                   <p>Reviews{rest.review_count}</p>
                 </div>
               );
             })}
          </div>
        </div>
  );
};

如何有条件地渲染使用挂钩的组件，我得到一个错误，即使用挂钩的组件无法全部渲染

1 个答案: