Question

我想将我的状态从基于类的组件传递到基于函数的组件。我正在关注this，但无法解决我的错误。如何访问属性？我犯什么错误？

类组件：

 const { userInfo } = this.state;
 <UserMenu {...userInfo}/>

控制台错误：

Failed to compile
./src/app/fuse-layouts/shared-components/UserMenu.js
  Line 18:32:  Expected an assignment or function call and instead saw an expression  no-unused-expressions

我要访问的属性：

address: ""
designation: (2) ["X", "Y"]
email: ""
id: "ABC"
name: "WER"
phone_number: "3456"
qualification: ""
role: "admin"
secondary_phone_number: ""

更新：

功能组件是：

function UserMenu({id}) {
    const dispatch = useDispatch();

    const [userMenu, setUserMenu] = useState(null);

    const userMenuClick = event => {
        setUserMenu(event.currentTarget);
    };

    const userMenuClose = () => {
        setUserMenu(null);
    };

    return (
        <>
           <Popover>
             ....

            </Popover>
        </>
    );
}

export default UserMenu;

我收到此错误：Expected an assignment or function call and instead saw an expression

解决： 我关注了this

Answer 1

您没有正确使用传播算子

更改

<UserMenu {...{userInfo}}/>

到

<UserMenu { ...userInfo }/>

在子组件中，您可以直接在props对象上访问userInfo对象的所有属性

function UserMenu({ address, email, id }) {
    ....
}

将道具从父组件传递到子组件的替代方法是

<UserMenu userInfo={ userInfo } />

如果您使用第二种方法，则props对象将具有名为userInfo的属性，其中包含您从父组件传递的所有用户数据

function UserMenu({ userInfo }) {
    ....
}

将状态传递给基于功能的组件时面临的问题

1 个答案: