当子组件在react hooks中调用useState()时，如何实现条件渲染？

Question

最近，我尝试用 React Hooks 替换项目中的类组件实现，但在实现子组件的条件渲染时遇到了一些麻烦。

我有一个父组件包含页眉、页脚和一个条件渲染子组件，该子组件渲染不同的子组件取决于父组件的状态，并且其状态由另一个 useEffect 控制，如下面所述的编码。

然而，我的一个子组件包含一个简单的计数器，它是由 useState() 实现的，就像官方 React Hooks 教程中的示例一样。由于钩子规则规定我们只能在顶层调用钩子，因此我的应用程序在渲染此子项时崩溃了。

我想解决方案之一是将子组件的 useState() 放入父组件或使用类似 Redux 的实现？但这有点尴尬，因为计数器只是一个简单的逻辑，没有必要放在组件之外。

所以我正在寻找另一种方法来解决这个问题。当然，如果我一开始的想法是错误的，请告诉我。

我的父组件：

const StorePage = (props) => {
    const { children } = props;
    const [detectedTagIds, setDetectedTagIds] = useState([]);
    const [detectedProducts, setDetectedProducts] = useState([]);

    const fetchProductByTagIds = (tagIds) => productController.getProducts({ tagId: tagIds })
        .then(res => res.json())
        .then(json => setDetectedProducts(json.result))

    // monitor detected tags
    useEffect(() => {
        ws.addEventListener('message', (event) => {
            const json = JSON.parse(event.data)
            const { tagId } = json;

            if (!_.includes(detectedTagIds, tagId)) {
                setDetectedTagIds(_.concat(detectedTagIds, tagId));
            }
        });
    }, []);

    // fetch while detected tags are changed
    useDeepCompareEffect(() => {
        fetchProductByTagIds(detectedTagIds)
    }, [detectedTagIds]);

    return (
        <div className="StorePage">
            {Header({ detectedProducts })}
            <div className="StorePage-content">
                {
                    detectedTagIds.length === 0 ?
                    LandingPage() :
                    ( detectedProducts.length === 1 ? ProductInfoPage({ detectedProduct: detectedProducts[0] }) : null )
                }
            </div>
            {Footer({ detectedProducts })}
        </div>
    );
};

export default StorePage;

这是我收到的错误消息，我认为这是由检测到的产品的更改触发的：

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useState                   useState
3. useEffect                  useEffect
4. useRef                     useRef
5. useEffect                  useEffect
6. useState                   useState
7. useState                   useState
8. useState                   useState
9. useRef                     useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Answer 1

有条件地渲染子组件是完全可以的，即使这些子组件使用了钩子，但你需要使用正常的 React 方式来这样做：要么通过编写 jsx 标签，要么通过手动调用 React.createElement （这是 jsx 编译的内容）进入）。直接将子组件作为函数调用将导致您所看到的问题。

return (
  <div className="StorePage">
    <Header detectedProducts={detectedProducts} />
    <div className="StorePage-content">
      {detectedTagIds.length === 0 ? (
        <LandingPage/>
      ) : detectedProducts.length == 1 ? (
        <ProductInfoPage detectedProducts={detectedProducts[0]} />
      ) : (
        null
      )}
    </div>
    <Footer detectedProducts={detectedProducts}/>
  </div>
);