Javascript 在React路由器中加载JSON文件时出现问题

我试图在此API链接中仅获取名称的区域，但它显示了

setState

属性中的错误。语法问题还是别的什么

顺便问一下：为什么我用这个例子，映射函数？为了将来的目的

谢谢

应用程序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;

从“React”导入React；
导入“/App.css”；
从“./区域”导入区域；
从“react router dom”导入{BrowserRouter，Switch，Route}；
函数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;

import React，{Component}来自“React”；
类区域扩展组件{
建造师（道具）{
超级（道具）
此.state={
项目：[]，
isLoad:错误
}
}
组件安装（）{
取回（“https://restcountries.eu/rest/v2/region/europe）然后（res=>res.json（））。然后（json=>{
这是我的国家({
isLoad=true，
items=JSON，
}) 
})
}
渲染（）{
让{isLoad，items}=this.state；
如果（！isLoad）{
返回加载。。。
}
否则{
回来

{items.map（items=>(

))}

}
}
}
导出默认区域；

---

json文件：

之所以

.map（）

是因为您有机会通过访问每个元素并返回不同的方式、结构来操作数组元素。在React case中，它有助于为

render（）

方法渲染适当的JSX元素。建议阅读React的官方文件

阅读文档：

map（）

方法创建一个新数组，其中填充了对调用数组中的每个元素调用所提供函数的结果

第一个问题是错误地将属性传递给

setState（）

，请注意，我使用的是

：

而不是

=

。尝试按以下方式进行更改：

this.setState({
   isLoad: true,
   items: JSON,
});

此外，您还可以尝试以下操作-当前元素的名称与数组本身的名称相同-最好使用不同的名称：

return <div>
     <ul>
         {items && items.map(e => <li key={e.name}> {e.name} </li>)}
     </ul>
</div>

返回

{items&&items.map（e=>
{e.name}
）}

我希望这有帮助