javascript - 渲染不同的组件时无法更新组件（useState）

Question

我正在尝试useState从子组件执行 a，但会触发警告，因此我的状态未更新。

错误 ：

Cannot update a component (`GetProduct`) while rendering a different component (`PageMenu`). To locate the bad setState() call inside `PageMenu`

我的组件中只有一个钩子setState触发器。useStateGetProduct

GetProduct零件：

export const GetProduct: React.FC<Props> = () => {

    let data = RecovData()
    console.log(data.formationData)

    const groupedByCategories = lodash.groupBy(data.formationData,
        function (form) {
            return form.categorie;
        })

    const categories = Object.keys(groupedByCategories);

    console.log('0', categories.length)

    const [currentCategory, setCurrentCategory]: [null | string, Function] = useState(null)


    useEffect(() => {
        if (categories.length > 0) {
            setCurrentCategory(categories[0])
        }
    }, [categories])


    console.log('current', currentCategory)
    if (currentCategory != null) {
        return (
            <div>
                <PageMenu
                    categories={categories}
                    setCurrentCategory={setCurrentCategory}
                />
                <MainCard
                    currentCategory={currentCategory}
                    formationData={data.formationData}
                    catalog={data.catalog}
                    shopId={data.shopId}
                    viewer={data.viewer}
                />
            </div>
        );
    }
    return null
};

PageMenu在哪里使用useState：

interface Props {
    categories?: string[],
    setCurrentCategory?: Function,
}

export const PageMenu: React.FC<Props> = (props) => {

    const categories = props.categories;
    const setCategory = props.setCurrentCategory;

    return (

        <PageHeader
            className="product-page-header"
            title="Découvrir toutes nos formations"
        >
            <Menu className="page-menu_wrapper" mode="horizontal" defaultSelectedKeys={['0']}>
                {categories.map((categorie, index) => {
                    console.log('ici', categorie)
                    return (
                        <Menu.Item
                            key={`${index}`}
                            className={"left-menu_item"}
                            onClick={setCategory(categorie)}
                        >
                            <Link to={`/`}>{categorie}</Link>
                        </Menu.Item>
                    )
                })}
            </Menu>
        </PageHeader>
    )
}

希望你能帮助我，谢谢

标签： javascriptreactjsreact-hooks