如何在 React 中显示 JSON 数据

Question

我正在使用 Frontend Mentor 的颜色主题切换器项目执行 REST 国家/地区 API。我正在使用 React 来执行此操作，但我在控制台中收到错误。这是国家/地区组件：

import react from "react";
import './contry.styles.css';

export const Country = (props) => (
    <div className="flex-containercountry">
        <div className="flex-itemscountry">
            <img alt="country" src={props.country.flags[0]}></img>
            <h1>{props.country.name}</h1>
            <h3>Population: {props.country.population}</h3>
            <h3>Region: {props.country.region}</h3>
            <h3>Capital: {props.country.capital}</h3>
        </div>
    </div>
);

export default Country;

这是国家/地区列表组件：

import react from "react";
import './countrylist.styles.css';
import { Country } from "./country.component";

export const CountryList = props => (
    <div className="countrylist">
        {props.country.map(country => (<Country key={props.country.name}/>))}
    </div>
);

export default CountryList;

这是主要的应用程序组件：

import HeaderWithDarkMode from './components/headerwithdarkmode.component';
import SearchBarWithFilter from './components/searchbarwithfilter.component';
import './App.css';
import { Component } from 'react';
import React from 'react';
import CountryList from './components/countrylist.component';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      countries: []
    };
  }

  componentDidMount() {
    fetch("https://restcountries.com/v3.1/all")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            countries: result.all
          });
        },
        
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, countries } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <div className="App">
          <HeaderWithDarkMode/>
          <SearchBarWithFilter/>
          <CountryList/>
        </div>
      );
    }
  }
}

export default App;

当我使用“npm start”执行项目时，页面变为空白，并且控制台中出现很多错误，例如：

"Uncaught TypeError: Cannot read properties of undefined (reading 'map')
    at CountryList (bundle.js:278:27)
    at renderWithHooks (bundle.js:22826:22)
    at mountIndeterminateComponent (bundle.js:25588:17)
    at beginWork (bundle.js:26787:20)
    at HTMLUnknownElement.callCallback (bundle.js:11776:18)
    at Object.invokeGuardedCallbackDev (bundle.js:11825:20)
    at invokeGuardedCallback (bundle.js:11885:35)
    at beginWork$1 (bundle.js:31627:11)
    at performUnitOfWork (bundle.js:30463:16)
    at workLoopSync (bundle.js:30400:9)
react-dom.development.js:20085 The above error occurred in the <CountryList> component:

    at CountryList (http://localhost:3000/static/js/bundle.js:278:19)
    at div
    at App (http://localhost:3000/static/js/bundle.js:35:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
countrylist.component.jsx:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'map')
    at CountryList (bundle.js:278:27)
    at renderWithHooks (bundle.js:22826:22)
    at mountIndeterminateComponent (bundle.js:25588:17)
    at beginWork (bundle.js:26787:20)
    at HTMLUnknownElement.callCallback (bundle.js:11776:18)
    at Object.invokeGuardedCallbackDev (bundle.js:11825:20)
    at invokeGuardedCallback (bundle.js:11885:35)
    at beginWork$1 (bundle.js:31627:11)
    at performUnitOfWork (bundle.js:30463:16)
    at workLoopSync (bundle.js:30400:9)
modalComponent.js:2 Error: Attempting to use a disconnected port object
    at chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:350577
    at Dc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:257067)
    at t.unstable_runWithPriority (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:274846)
    at Yo (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197386)
    at Nc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:256528)
    at yc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:248018)
    at chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197609
    at t.unstable_runWithPriority (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:274846)
    at Yo (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197386)
    at Ko (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197554)
sl @ modalComponent.js:2
modalComponent.js:2 Uncaught Error: Attempting to use a disconnected port object
    at chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:350577
    at Dc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:257067)
    at t.unstable_runWithPriority (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:274846)
    at Yo (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197386)
    at Nc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:256528)
    at yc (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:248018)
    at chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197609
    at t.unstable_runWithPriority (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:274846)
    at Yo (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197386)
    at Ko (chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js:2:197554)
DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/content.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/modalComponent.js.map: System error: net::ERR_BLOCKED_BY_CLIENT
DevTools failed to load source map: Could not load content for chrome-extension://fhamhppabjaafimidmelnmpfangjdnhj/analytics.js.map: System error: net::ERR_BLOCKED_BY_CLIENT ""

有人有吗这有什么问题吗？

Answer 1

您正在映射一个名为 country 的 prop：

props.country.map(/.../)

但您从未提供任何 props：

<CountryList/>

因此 props.country 是 undefined，如错误所示。要定义它，请将该 prop 传递给组件。例如：

<CountryList country={countries} />