时间戳

首页 > 解决方案 > 获取 json 数据到状态数组

javascript - 获取 json 数据到状态数组

问题描述

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

但我收到此错误：

未捕获的错误：对象作为 React 子项无效（发现：对象带有键 {gender、name、location、email、login、dob、registered、phone、cell、id、picture、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>
    )
}

标签： javascriptreactjsreact-native

解决方案

似乎是具有, , , , , , , , , , ,键res.results[0]的对象。但是您正在尝试将状态值设置为数组。gendernamelocationemaillogindobregisteredphonecellidpicturenatdata

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

在渲染函数中浏览数据，使用 . 迭代键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>
    )
}

推荐阅读