时间戳

首页 > 解决方案 > 在 Reactjs 中使用 useState 处理深度嵌套的 Json 对象

json - 在 Reactjs 中使用 useState 处理深度嵌套的 Json 对象

问题描述

我试图从嵌套的 json 中获取价值。但出现“未定义”错误。当我在控制台中显示相同的对象时，它工作正常。我想从嵌套的 json 对象中获取特定的字段。

这是 api 的 json 输出，我想从下面的 json 中获取用户 ID、名称和验证字段

{
status: true,
user:
{
    id: 11362
    phone: "+918971557357"
    name: "Sagar pawar"
    email: null
    bio: null
    address: null
    date_of_birth: null
    token: "EMAWdBl3LDjl1X5veo6VvZBKfgQns5wTFXKWjIh9w4VKKXlclRo5ZBlWaJUBS5ImaVZANN9DlHSbFWquObaW1FIJLVGPqFLWKoPEzKLvZAJakhoTxg5TRTjVtLEVz9R9zAbocwF7dmRdI4GCAMlJdtKOEZAUuOcf6AZD"
    image: ""
    role: "user"
    notification_cleared: {date: "2019-12-28 11:42:34.899503", timezone_type: 3, timezone: "UTC"}
    deleted_by: null
    blocked: 0
    verified: 0
    }
}

这是我尝试的获取功能。

fetch(url, options)
      .then(res => res.json())
      .then(body => console.log("Data Response", body))
      .then(data => {
        const jsonobj = data.user.id;
        console.log("User ID:", jsonobj);
      })

这个我试过了。

const [responseUserId, setUserId] = useState(userId);
...

fetch(url, options)
    .then(res => res.json())
    .then(res =>
      setUserId({ userId: res.user['id'] })
    )

提前致谢。

标签： jsonreactjs

解决方案

首先也是最重要的。在您记录数据时的 fetch 函数中，在第二个中您不返回任何数据，因此在第三个中您的回调参数未定义。之后console.log("Data Response", body)，您应该添加，因此它会像您的下一条语句return body一样传递下去。datathen

其次，您的 id 是一个字符串（或数字，没关系）。所以你的responseUserId将是一个字符串。所以当你设置状态时useState不需要传入对象，只需传递值即可。像这样 ：setUserId(res.user['id'])

希望这可以帮助！

推荐阅读