如何实现有条件的渲染，而儿童组件在React Hooks中调用USESTATE()

Question

最近我试图用react钩子替换项目中的类组件实现，并且在实施儿童组件的条件渲染方面遇到了一些麻烦。

i有一个父组件包含标头，页脚和有条件的渲染子组件，该组件正在渲染不同的子女组件取决于父组件的状态，其状态由下面所述的另一种使用效率控制。

。

但是，我的一个孩子组件包含一个简单的计数器，该计数器由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;

这是我收到的错误消息，我认为这是由 destedproducts 的更改触发的：

   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

，即使这些孩子使用钩子，也可以有条件地渲染孩子组件，但是您需要使用正常的反应方式：通过编写JSX标签，或者通过手动调用React.Createlement(这是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>
);