如何修复React Hooks条件调用报错？附问题组件代码

这个错误的核心原因是你在条件性return之后调用了Hook——当loading为true时，组件会提前返回<p>Loading...</p>，导致后面的useObserver Hook根本不会被执行。而React要求组件的每次渲染中，Hook的调用顺序必须完全一致，不能有条件性的跳过任何Hook调用。

正确的修复思路 #

确保所有Hook调用都放在组件的最顶部，不能在任何条件判断、循环或者可能提前return的代码之后。你可以选择以下两种修复方式：

方式一：先调用所有Hook，再做条件返回

把useObserver的调用提前，确保每次渲染都执行所有Hook，之后再根据loading状态决定返回内容：

const YourComponent = () => {
  // 所有Hook都放在组件最开始，确保每次渲染顺序一致
  const store = React.useContext(StoreContext);
  const [loading, setLoading] = useState(false);
  const observerContent = 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="restaurant" />
              <p>Reviews {rest.review_count}</p>
            </div>
          );
        })}
      </div>
    </div>
  ));

  // 所有Hook调用完成后，再进行条件返回
  if (loading) {
    return <p>Loading...</p>;
  }

  return observerContent;
};

方式二：在Hook回调内部处理条件渲染

把loading的判断逻辑放到useObserver的回调函数里，这样useObserver每次渲染都会被调用，不会破坏Hook的调用顺序：

const YourComponent = () => {
  const store = React.useContext(StoreContext);
  const [loading, setLoading] = useState(false);

  // useObserver每次都会被调用，条件判断在回调内部进行
  return useObserver(() => {
    if (loading) {
      return <p>Loading...</p>;
    }

    return (
      <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="restaurant" />
                <p>Reviews {rest.review_count}</p>
              </div>
            );
          })}
        </div>
      </div>
    );
  });
};

额外小提示 #

• 注意你代码里的拼写错误：alt="restuarant"应该改为alt="restaurant"
• Reviews{rest.review_count}建议加个空格，变成Reviews {rest.review_count}，提升可读性

内容的提问来源于stack exchange，提问作者user2643810