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;

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

   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>
);

当子组件在react钩子中调用useState（）时，如何实现条件渲染？

1 个答案: