Проблема с загрузкой файла JSON в React Router

Question

Я пытаюсь получить только область имени в этой ссылке 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;

компонент:

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;

json файл: https://restcountries.eu/rest/v2/region/europe

Answer 1

Причина .map() заключается в том, что вы получаете возможность манипулировать элементами массива, получая доступ к каждому элементу и возвращая по-другому структуру. В случае React это помогает визуализировать правильные JSX элементы для метода render(). Рекомендуется прочитать Списки и ключи из официальной документации React.

Читать из 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>

Надеюсь, это поможет!