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>
)
}
解决方案
似乎是具有, , , , , , , , , , ,键res.results[0]
的对象。但是您正在尝试将状态值设置为数组。gender
name
location
email
login
dob
registered
phone
cell
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>
)
}
推荐阅读
- c++ - C++ 对象声明需要另一个对象作为参数
- php - 以编程方式更新超级属性价格
- c++ - 从 C++ 中的二进制文件读取字节时,整数有时会偏离正数或负数 256
- node.js - 如何使用 expressjs 在 React 中上传图像
- windows - 在执行期间有 .bat 显示信息(WinSCP)
- node.js - 由于语音响应为空,无法将 Dialogflow 响应解析为 AppResponse
- python - Python检测文件的不同扩展名
- assembly - 为什么我的程序只使用 pos 或 neg 数字?
- java - 只要数组在JAVA中包含某个值,我将如何编写一个将连续循环的语句
- javascript - 在 Vue.js 中传递参数