在React中使用map()来迭代嵌套的Prop

Using map() to iterate through a nested Prop in React

本文关键字：迭代 嵌套 Prop React map      更新时间：2023-09-26

我目前正在使用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——

这个<<p> strong> : 
 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

结合map, this WORKS

  renderContinents(area) {
    return(
      <div>
        {area.name}
      </div>
      )
    }
  render() {
    return(
        <div> 
            {this.props.areas.map(this.renderContinents)}
        </div>
    );
  }
}
这个输出:

 Europe
 Asia

BUT当我包含{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上，两个大洲都显示出来了，但是"this is a country doesn't show "我得到一个

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永远不能运行。我仍然对此有点困惑，但我想我要试着把组件分开，看看它是否解决了这个问题。

两件事:

1)在你的问题中的第二个代码块中，你正在做area.countries.map。area对象上的键称为Countries，而不是countries。area.countries应该是未定义的

2) area.Countries是一个对象数组，就像你在你的问题中说的。是的，你可以很好地映射它们。问题是每个Country都是一个对象，因此，您试图在renderCountries函数中将对象呈现为<div>的子对象。如果你只想显示国家的名字，你应该这样做:

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

您将看到一些有意义的输出

如果你有打字错误，请使用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>);
 }
}
相关文章：