代码之家 › 专栏 › 技术社区 › Developer

函数输出在函数和使用函数的地方不同

typescript reactjs

Developer · 技术社区 · 6 月前

我们使用reactjs和Typescript进行开发。在我们的一个组件中,我们使用以下两个函数。

interface SysUser {
    id: number;
    name: string;
    group: string;
}

const getUsers = (userGroup: string): { listUsers: SysUser[] } => {

    let listUsers: SysUser[] = [];

    listUsers.push({ id: 1, name: "John", group: userGroup });
    listUsers.push({ id: 2, name: "David", group: userGroup });

    console.log("listUsersinFunction", JSON.stringify(listUsers));

    return { listUsers };

}

const showUsers = () => {
    let sysUsers = getUsers("SYS");
    console.log("listUsersafterFunction", JSON.stringify(sysUsers));

    //business logic

}

getUsers中的控制台日志是

listUsersinFunction [{"id":1,"name":"John","group":"SYS"},{"id":2,"name":"David","group":"SYS"}]

而showUsers中的控制台日志是

listUsersafterFunction {"listUsers":[{"id":1,"name":"John","group":"SYS"},{"id":2,"name":"David","group":"SYS"}]}

期望两者应该相同。但showUsers中的对象完全不同。我们在这里做错了什么?

任何帮助都将不胜感激。谢谢

1 回复 | 直到 6 月前

Anup Gopi 6 月前

修改访问返回值的方式

const showUsers = () => {
    const { listUsers } = getUsers("SYS"); /* <-- modify how you access the return value from getUsers method */
    console.log("listUsersafterFunction", JSON.stringify(listUsers));

    //business logic

}

您正在返回一个 Object 在里面 getUsers 方法。 return { listUsers } .返回值是 对象 你会得到这样的东西 {"listUsers":[{"id":1,"name":"John","group":"SYS"},{"id":2,"name":"David","group":"SYS"}]} .

方法1: 访问listUsers数组值,可以使用Object解构,如下所示 const { listUsers } = getUsers("SYS");

方法2: 修改return语句 getUsers 方法as return listUsers;