获取 json 数据到状态数组答案

【问题标题】：fetch json data to state array获取 json 数据到状态数组
【发布时间】：2021-03-11 15:36:12
【问题描述】：

我获取并获取数据，我想使用 setState 作为数组或对象将其保存到状态，以便我可以调用返回部分中的每个字段并将其显示在屏幕上

但我收到此错误：

未捕获的错误：对象作为 React 子项无效（找到：对象带键{性别，姓名，位置，电子邮件，登录，出生日期，注册，电话、手机、身份证、图片、nat}）。如果你打算渲染一个集合的孩子，使用数组代替

import {useState} from 'react'

export default function Test(){
    const [data, setData] = useState([]);

    const getInfo = async () =>{
        const response = await fetch('https://randomuser.me/api');
        if(response.status === 200){
            const res = await response.json();
            setData(res.results[0]);
            // also try this: setData(res) 
            // also try this: setData(res.result)
        }else{
            throw new Error('Unable to fetch data')
        }
    }
    
    return(
        <div>
            <button onClick={() =>{getInfo()}}>fetch data</button>
            {data}
        </div>
    )
}

【问题讨论】：

console.log(res.results[0])的结果是什么？
{getInfo()} 被解释为一个对象。去掉花括号，改用<button onClick={getInfo}>fetch data</button>。
@BlackMath const getInfo = async () =>{ 我不这么认为——这声明了一个函数
为什么不呢？这当然是一个功能@Antax

标签： javascript reactjs react-native

【解决方案1】：

请看一下这个codeandbox URL，我觉得你可以为你的用例使用useEffect link

【讨论】：

【解决方案2】：

问题是您得到的响应不是数组。您正在尝试在对象上使用高阶数组方法。使用，

const resultArray = res.results;

从 JSON 中获取结果数组。

【讨论】：

【解决方案3】：

似乎res.results[0] 是具有gender、name、location、email、login、dob、registered、phone、@ 键的对象987654331@、id、picture、nat。但是您正在尝试将状态值 data 设置为数组。

您应该将数据类型设置为对象。

在渲染函数中浏览数据，使用Object.keys()迭代键。

对于render中的onClick触发方式，不需要() => {getInfo()}，因为该方法没有具体的参数传递，直接使用onClick={getInfo}即可。

import {useState} from 'react'

export default function Test(){
    const [data, setData] = useState({});

    const getInfo = async () =>{
        const response = await fetch('https://randomuser.me/api');
        if(response.status === 200){
            const res = await response.json();
            setData(res.results[0]);
            // also try this: setData(res) 
            // also try this: setData(res.result)
        }else{
            throw new Error('Unable to fetch data')
        }
    }
    
    return(
        <div>
            <button onClick={getInfo}>fetch data</button>
            {Object.keys.map(key => (<div>
               {key} : {data.key}
            </div>)}
        </div>
    )
}

【讨论】：

【解决方案4】：

这里从“https://randomuser.me/api”返回的数据不是简单的 JSON 数据。它实际上是一个 JSON 对象，其中包含多个子对象，例如“name”，它再次具有“title”、“first”和“last”作为子对象。这就是您收到“找到：带键的对象”错误的原因。

如果您正在寻找用于测试目的的虚拟数据，我建议您查看“https://jsonplaceholder.typicode.com/”，这是一个很好的虚拟 JSON 数据来源。

我已经更新了你的代码，它以正确的 JSON 格式返回数据并且可以分配给状态。

  const getInfo = async () =>{
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    
    if(response.status === 200){
        const res = await response.json();
        console.log(res)
        setData(res);        
    }else{
        throw new Error('Unable to fetch data')
    }
}

【讨论】：

【解决方案5】：

您的问题可能是您使用的是setData(res.results[0]);

我敢打赌这是一个对象而不是数组。

const [data, setData] = useState([]);

表示 setData 函数只存储数组。

尝试使用

const [data, setData] = useState({});

看看有没有效果

如果它不起作用，请给我们输出console.log(res.results) 和console.log(typeof(res.results[0]))

【讨论】：