Javascript Can'；将道具传递给模态组件后，无法访问对象内部的数组

我在RestCountries Api的帮助下构建这个应用程序，以便能够在网格上显示每个国家的基本详细信息，单击每个框后，应用程序将显示包含更多详细信息的模式。这是我目前的代码：

class App extends React.Component{
  constructor (props){
    super (props);
    this.state={
      countries : [],
      clickedCountry: {},
      modalOn : false,


    }
  }



  componentDidMount(){
    axios.get(`https://restcountries.eu/rest/v2/all`)
    .then(res => {
      const data = res.data;


      this.setState({
        countries : data

      })


      let countries = this.state.countries
      console.log(countries);

       })



  }


  showInfo = (name) => {
    this.setState({
      clickedCountry : this.state.countries.find(it => it.name===name),
      modalOn : true

    });   
  }



  closeModal =()=>{
    this.setState({
      modalOn : false
    })
  }



  render() {
    return (
      <div  className="container">
      {this.state.countries.map(country=>
 <Country name={country.name}
                 key={country.name} 
                 population ={country.population} 
                 region={country.region}
                 capital={country.capital}
                 flag={country.flag}
                 showInfo={this.showInfo}
                 languages={country.languages}
                 />

      )}
      <div style={{display: this.state.modalOn? "block" : "none"}}>
        <Modal closeModal={this.closeModal} 
               name={this.state.clickedCountry.name} 
               population={this.state.clickedCountry.population}
               region={this.state.clickedCountry.region}
               capital ={this.state.clickedCountry.capital}
               flag={this.state.clickedCountry.flag}
               nativeName ={this.state.clickedCountry.nativeName}
               subregion={this.state.clickedCountry.subregion}
               topLevelDomain={this.state.clickedCountry.topLevelDomain}
               languages={this.state.clickedCountry.languages}
              />
      </div>

      </div>
    )
  }
}

---

我需要访问语言数组。现在，如果我尝试在country组件中映射语言，我可以显示信息。但是我只想在模态组件上显示语言，如果我映射了负责模态的clickedCountry状态，我将收到“语言”未定义的错误。如果同一个对象通过find函数进行过滤，结果会怎样？希望我很清楚，伙计们，干杯。

我知道你们明白发生了什么！，只需将其添加到模态组件

<ul>
{
languages && languages.map(lan=> {return <li>{lan.name}</li>} )
 }
</ul>

{
languages&&languages.map（lan=>{return
{lan.name}
}）
}

Yoir问题不清楚。您试图在哪个组件中访问语言数组？模态组件，所以我想我需要映射clickedCountry状态。它可以工作！非常感谢你。你能解释一下为什么我必须使用&&运算符吗？为什么当我试图在country组件内部映射时，我呈现了没有ul li标记和&&检查的语言？检查属性（

语言

）是否存在。如果

languages

为null，则不会执行&&之后的语句，并且不返回任何要呈现的内容。因此，映射函数在

语言

不为空时工作，以防止出现错误。您应该使用此国家/地区组件。正如您所知，

语言

是属性列表（名称，…），我使用ul和li标记来显示列表。hop可能很有用。

area: 91
gini: null
timezones: ["UTC-04:00"]
borders: []
nativeName: "Anguilla"
numericCode: "660"
currencies: [{…}]
languages: [{…}]
translations: {de: "Anguilla", es: "Anguilla", fr: "Anguilla", ja: "アンギラ", it: "Anguilla", …}
flag: "https://restcountri

<ul>
{
languages && languages.map(lan=> {return <li>{lan.name}</li>} )
 }
</ul>