使用map（）遍历React中的嵌套Prop

Question

我目前正在使用react渲染一个名为area的道具，如下所示：

[{
    "id": 1,
    "name": "Europe",
    "Countries": [{
        "id": 1,
        "name": "Iceland",
        "Cities": [{
            "id": 1,
            "name": "Selfoss"
        }]
    }, {
        "id": 2,
        "name": "Switzerland",
        "Cities": [{
            "id": 2,
            "name": "Geneva"
        }]
    }]
}, {
    "id": 2,
    "name": "Asia",
    "Countries": [{
        "id": 3,
        "name": "Japan",
        "cities": [{
            "id": 3,
            "name": "Yokohama"
        }]
    }]
}]

更新2-

这工作 ：

 class AreaBar extends Component {
  constructor(props) {
    super(props);
   }

  .....

  renderCountries() {
    return(
      <div>
        This is the country
      </div>
      )
    }

  renderContinents() {
    return(
      <div>
        This is the continent
        {this.renderCountries()}
      </div>
      )
    }

  render() {
    return(
        <div> 
            {this.renderContinents()}
        </div>
    );
  }
}

输出：

 This is the continent
 This is the country

结合地图，这个工程

  renderContinents(area) {
    return(
      <div>
        {area.name}
      </div>
      )
    }

  render() {
    return(
        <div> 
            {this.props.areas.map(this.renderContinents)}
        </div>
    );
  }
}

输出：

 Europe
 Asia

但是当我包含{this.renderCountries()} ，它什么也不会输出，这就是为什么我无法获得建议的原因。

  renderCountries() {
    return(
      <div>
        This is the country          
      </div>
      )
    }


  renderContinents(area) {
    return(
      <div>
        {area.name}
        {this.renderCountries()}
      </div>
      )
    }


  render() {
    return(
        <div> 
            {this.props.areas.map(this.renderContinents)}
        </div>
    );
  }
}

在Firefox上，两个大陆都出现了，但是“这是一个没有出现的国家”，相反，

unreachable code after return statement

When an expression exists after a valid return statement, 
a warning is given to indicate that the code after the return 
statement is unreachable, meaning it can never be run.

似乎在说renderCountries永远无法运行。 我对此仍然有些困惑，但是我想我将尝试分离这些组件，并查看它是否可以解决问题。

Answer 1

两件事情：

1）在问题的第二段代码中，您正在执行area.countries.map 。 您area对象上的键称为“ Countries ，而不是“ countries 。 area.countries应该未定义。

2） area.Countries是一个对象数组，就像您在问题中所说的那样。 所以是的，您可以在它们上面映射。 问题在于每个Country都是一个对象，因此，您试图在renderCountries函数中将对象作为<div>的子级进行渲染。 如果只想显示国家/地区的名称，则应执行以下操作：

renderCountries(country){
  return(
    <div>
    {country.name}
    </div>
  )
}

然后，您将看到一些有意义的输出。

Answer 2

您有错别字，请使用area.Countries而不是area.countries

另外，我认为您至少应创建3个组件： Area ， Country和City 。 然后，您可以像这样渲染数据（请注意，我使用ES6语法）：

var areas = [/* array you posted above*/];

// in your top-level component
render() {
 return (<div>
  {areas.map((area) => {
   return <Area data={area}/>;
  })}
 </div>);
}


// Area component
export function Area({data}) {
 render() {
  return (<div>
   Area name: {data.name}
   {data.Countries.map((country) => {
    return <Country data={country}/>
   })}
  </div>);
 }
}

// Country component
export function Country({data}) {
 render() {
  return (<div>
   Country: {data.name}
   {data.Cities.map((city) => {
    return <City data={city}/>
   })}
  </div>);
 }
}

// City component
export function City({data}) {
 render() {
  return (<div>
   City: {data.name}
  </div>);
 }
}