Question

我有嵌套的组件，其中在子组件中调用了上层组件的函数，并且该组件中的状态发生了变化。使用道具将状态传递给孩子。问题是状态更改时，除非我单击它，否则内容不会更改。这里我的组件是一个按钮。

render(

    <React.Fragment>

        <Button className="h-64 remove-user-tab" onClick={userMenuClick}>
            <Avatar className="" alt="user photo" src={props.userInfo.data.avatar}/>

            <div className="hidden md:flex flex-col mx-12 items-start">
                <Typography component="span" className="normal-case font-600 flex">
                    {props.userInfo.data.first_name + ' ' + props.userInfo.data.last_name}
                </Typography>
                <Typography className="text-11 capitalize" color="textSecondary">
                    {props.userInfo.role.toString()}
                </Typography>
            </div>

            <Icon className="text-16 hidden sm:flex" variant="action">keyboard_arrow_down</Icon>
        </Button>

    </React.Fragment>

)

updateUserInfo()和userInfo使用道具从主要组件传递给孩子。我在另一个孩子中调用props.updateUserInfo()函数，该函数会更新父孩子中的userInfo状态。然后，我希望同级孩子重新呈现其内容，但是重新呈现上面的代码需要单击该按钮才能生效。我该怎么解决？

ReactJs状态更改，但重新渲染需要单击按钮

0 个答案: