Question

我正在使用React迈出第一步并且遇到了这个错误：

“Uncaught（in promise）TypeError：无法在Region.render（Region.js：52）中读取未定义的属性”map“”

有问题的文件如下所示：

import React, { Component } from 'react';
import 'whatwg-fetch';

import {
  Link
} from 'react-router-dom';


class Region extends Component {
    constructor(props) {
        super(props);
        this.state = {
            region: [],
            error: false,
    }
  }

  componentDidMount() {
    const id = this.props.match.params.area_id;
    this.fetchData(id);
  }

  fetchData(id) {
      fetch('http://localhost:5000/api/area_id/'+id)
        .then(response => response.json())
        .then((data) => {
            console.log('data', data);
            this.setState({
                region: data.objects,
            });
        })
          .catch((err) => {
             console.log('villa', err)
              this.setState({
                  error: true,
              })
          });
  }
  render() {
    const { region, error } = this.state;

    console.log(region);
    const list = region.map((region) => { //THIS IS LINE 52
        const link = '/region/' + region.id + '/farm/' +region.farm_id;

        return (
            <li key={region.farm_id}><Link to={link}>Area:     
{region.area_name} - <bold>Farm:</bold>{region.farm_name} </Link></li>
      );
    })

    return (
      <div>
        <h2>Region</h2>
        <br/>
          {error ? (<p>Error getting data!</p>) : null}
        <ul className="link-list">
          {list}
        </ul>
        <Link to="/">Back</Link>
      </div>
    );
  }
}

export default Region;

“http://localhost:5000/api/area_id”的API如下所示：

{
  "num_results": 7, 
  "objects": [
    {
      "area_id": 1, 
      "area_name": "\u00c1shreppur", 
      "farms": [
        {
          "area_id": 1, 
          "area_name": "\u00c1shreppur", 
          "farm_id": 1, 
          "farm_name": "HVAMMUR"
        }, 
        {
          "area_id": 1, 
          "area_name": "\u00c1shreppur", 
          "farm_id": 2, 
          "farm_name": "HVAMMKOT"
        }, 
.....

为了增加更多细节，我可以告诉你，这是某个地区历史的第一版，并且在何时何地生活。因此，有7个区域，每个区域都有农场，每个农场都有一个名字和年份，记录了过去曾经居住过的人。

所以第一页加载。我得到了7个区域链接的列表。当按下其中一个链接时，我收到此错误。在我完成这项工作之后，我希望能够点击任何一个农场来获取该农场的居民名单以及他们在那里居住的年份。

React：Uncaught（在promise中）TypeError：无法读取未定义

0 个答案: