javascript - 在跳过数组中的第一个对象时从 API 获取数据
问题描述
使用 react.js,我正在尝试使用以下代码从 API 获取数据:
import React,{useState,useEffect} from 'react';
function App() {
const [data,setData]=useState([]);
const getData=()=>{
fetch('src/data.json')
.then(function(response){
return response.json();
})
.then(function(myJson) {
setData(myJson)
});
}
useEffect(()=>{
getData()
},[])
return (
<ul>
{data.map((item) =>
<li key={item.id}>{item.name}</li>
)}
</ul>
);
}
export default App;
和 api json 响应是(来自 data.json 的示例):
{"users":
[{"id":1,"name":"John"},{"id":2,"name":"Samantha"}]
}
如果我删除该对象{"users":
}
,则代码可以工作,但 API 会将此对象添加到所有端点。
有没有办法忽略第一个对象,或者解构它,以便我得到以下输出:
- 1约翰
- 2萨曼莎
解决方案
如果您的 Javascript 解释器是最新的,您可以尝试使用扩展运算符。
object = {"users":
[{"id":1,"name":"John"},{"id":2,"name":"Samantha"}]
};
object = {...object.users};
结果:
{
0: {id: 1, name: 'John'},
1: {id: 2, name: 'Samantha'}
}
更多信息: https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
推荐阅读
- c# - 2 不同组框中的单选按钮
- typescript - 在这种情况下,TypeScript 类型系统是否过于宽松?
- reactjs - 错误:在渲染时,Provider 的钩子调用无效
- java - Javassist - 向参数添加注释 [已解决]
- reactjs - 如何比较 React Hooks useEffect 上的 oldValues 和 newValues?多次重新渲染
- jupyter-notebook - Jupyter 笔记本正在加载,但在运行时没有任何反应
- python - Flask 应用程序未在 localhost 上运行,没有错误
- java - 如何一次从数组中获取 3 个整数的信息
- node.js - Docker 多容器应用程序:React、Nginx 和反向代理的问题(无效的 URL 前缀)
- html - 响应式 Flexbox 在 Tailwind css 中无法正常工作