Использование карты() перебрать вложенным Prop в React

Question

я в настоящее время с помощью реакции, чтобы сделать опорой называется 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" 
     }] 
    }] 
}] 

UPDATE 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 является объектом, и, таким образом, вы пытаетесь отобразить объект в качестве дочернего элемента вашего <div> в своей функции renderCountries. Если вы хотите, чтобы отобразить название страны, вы должны сделать что-то вроде этого:

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>); 
} 
}