javascript - 在 React Router 中加载 JSON 文件的问题
问题描述
我尝试在此 API 链接中仅获取名称的区域,但它显示setState
. 语法问题还是别的什么?
顺便问一下:为什么我用这个case,map函数?为了将来的目的。
谢谢!
应用程序 Js:
import React from 'react';
import './App.css';
import Region from './region';
import {BrowserRouter,Switch,Route} from "react-router-dom";
function App() {
return (
<div className="App">
<BrowserRouter>
<Switch>
<Route exact path = "/" component={Region}/>
</Switch>
</BrowserRouter>
</div>
);
}
export default App;
组件:
import React, { Component } from "react";
class Region extends Component {
constructor (props) {
super (props)
this.state = {
items:[],
isLoad:false
}
}
ComponentDidMount () {
fetch("https://restcountries.eu/rest/v2/region/europe").then(res=>res.json()).then(JSON=> {
this.setState ({
isLoad = true,
items = JSON,
})
})
}
render () {
let {isLoad,items} = this.state;
if(!isLoad) {
return <div>Loading...</div>
}
else {
return <div>
<ul>
{items.map(items=>(
<li key={items.name}> </li>
))}
</ul>
</div>
}
}
}
export default Region;
解决方案
背后的原因.map()
是您有机会通过访问每个元素并返回不同的方式、结构来操作数组元素。在 React 案例中,它有助于为方法呈现正确的JSX元素render()
。建议阅读React 官方文档中的Lists and Keys。
Array.prototype.map()
从文档中读取:
该
map()
方法创建一个新数组,其中填充了对调用数组中的每个元素调用提供的函数的结果。
第一个问题是错误地将属性传递给setState()
,请注意我使用:
的是=
. 尝试更改如下:
this.setState({
isLoad: true,
items: JSON,
});
此外,您可以尝试以下操作 - 当前元素的名称与数组本身的名称相同 - 最好使用不同的名称:
return <div>
<ul>
{items && items.map(e => <li key={e.name}> {e.name} </li>)}
</ul>
</div>
我希望这会有所帮助!
推荐阅读
- javascript - 在 Firefox Webextension Contentscript 中使用 fontawesome
- algorithm - 具有常见重复序列的核苷酸的高效数据存储
- c++ - 手动查找 UV 点
- javascript - 如何通过 Cockpit api 进行更新
- reactjs - 将 `eslint-plugin-jsx-a11y` 与 `styled-components` 一起使用
- python - 使用 Django 客户端测试多个复选框
- matlab - 使用用户定义函数的卷积核。如何处理负像素值?
- python - Matplotlib 直方图不显示分布细节
- jquery - 移动 Safari 滚动问题 - 过度滚动和橡皮筋
- node.js - 在 Express 中更改每条路线的视图目录?