即使道具正在交付，組件也不返回用戶界面

Question

我對React相當陌生，所以我認爲這裏的問題很可能是非常基本的。我在顯示區域的列表，當用戶點擊一個區域，我通過道具傳遞對象到CountryList組件：

render() { 
     return (
      <div> 
       <SelectRegion 
        selectedRegion={this.state.selectedRegion} 
        onSelect={this.updateBoth} /> 
       { !this.state.countryCodes 
        ? "Select a region" 
        : <CountryList countryCodes={this.state.countryCodes} /> } 
      </div> 
     ) 
    } 

的SelectRegion部件工作正常，但CountryList只呈現組件，而不內容。這是CountryList組件。

function CountryList(props) { 
    return (
     <ul className="country-list"> 
      {Object.entries(props.countryCodes).forEach(([key, val]) => { 
       return (
        <li 
         key={key} 
         className="country-item" > 
          <div className="country-code">{key}</div> 
          <ul className="space-list-items"> 
           <li> 
            <img 
             className="flag" 
             src={`http://www.geognos.com/api/en/countries/flag/${key}.png`} 
             alt={"Flag for " + val} 
            /> 
           </li> 
          </ul> 
        </li> 
       ) 
      })} 
     </ul> 
    ) 
} 

如果我期待在檢查，我可以看到，當用戶點擊該域的狀態更新時，CountryList組件添加到頁面（還有<ul></ul>），並且它具有適當的道具（一個物體）。我錯過了什麼是保持組件不顯示？

如果它是有幫助的，這是整個組件：

function App() { 
 
\t return (
 
\t <div> 
 
\t \t <Selector /> 
 
\t </div> 
 
\t) 
 
} 
 

 
function SelectRegion (props) { 
 
\t const regionCountry = { 
 
\t \t "Europe": { 
 
\t \t \t "PL": "Poland", 
 
\t \t \t "HU": "Hungary", 
 
\t \t \t "DE": "Germany", 
 
\t \t \t "AT": "Austria", 
 
\t \t \t "DK": "Denmark", 
 
\t \t \t "ES": "Spain", 
 
\t \t \t "GR": "Greece", 
 
\t \t \t "IT": "Italy", 
 
\t \t \t "CH": "Switzerland", 
 
\t \t \t "RU": "Russia", 
 
\t \t \t "FR": "France", 
 
\t \t \t "BE": "Belgium", 
 
\t \t \t "LU": "Luxembourg", 
 
\t \t \t "SE": "Sweden", 
 
\t \t \t "NO": "Norway", 
 
\t \t \t "SI": "Slovenia", 
 
\t \t \t "LT": "Lithuania", 
 
\t \t \t "CY": "Cyprus", 
 
\t \t \t "LV": "Latvia", 
 
\t \t \t "BG": "Bulgaria", 
 
\t \t \t "HR": "Croatia", 
 
\t \t \t "GB": "United Kingdom", 
 
\t \t \t "IE": "Ireland", 
 
\t \t \t "GE": "Georgia", 
 
\t \t \t "RO": "Romania", 
 
\t \t \t "FI": "Finland", 
 
\t \t \t "NL": "Netherlands", 
 
\t \t \t "ME": "Montenegro" 
 

 
\t \t }, 
 
\t \t "Americas": { 
 
\t \t \t "CA": "Canada", 
 
\t \t \t "US": "USA", 
 
\t \t \t "MX": "Mexico", 
 
\t \t \t "BR": "Brazil", 
 
\t \t \t "CL": "Chile", 
 
\t \t \t "AR": "Argentina", 
 
\t \t \t "CO": "Columbia", 
 
\t \t \t "UY": "Uruguay" 
 
\t \t }, 
 
\t \t "APAC": { 
 
\t \t \t "AU": "Australia", 
 
\t \t \t "NZ": "New Zealand", 
 
\t \t \t "KZ": "Kazakhstan", 
 
\t \t \t "JP": "Japan", 
 
\t \t \t "TH": "Thailand", 
 
\t \t \t "TW": "Taiwan" 
 
\t \t }, 
 
\t \t "Middle East & Africa": { 
 
\t \t \t "IL": "Israel", 
 
\t \t \t "TR": "Turkey", 
 
\t \t \t "AE": "UAE", 
 
\t \t \t "SA": "South Africa" 
 
\t \t } 
 
\t } 
 

 
\t return (
 
\t \t <ul className="regions"> 
 
\t \t \t {Object.keys(regionCountry).map((region) => { 
 
\t \t \t \t return(
 
\t \t \t \t \t <li 
 
\t \t \t \t \t style={region === props.selectedRegion ? {color: '#d0021b'} : null} 
 
\t \t \t \t \t onClick={props.onSelect.bind(null, region, regionCountry[region])} 
 
\t    \t key={region} > 
 
\t    \t \t {region} 
 
      \t \t </li> 
 
      \t) 
 
\t \t \t })} 
 
     </ul> 
 
\t) 
 
} 
 

 
function CountryList(props) { 
 
\t return (
 
\t \t <ul className="country-list"> 
 
\t \t \t {Object.entries(props.countryCodes).forEach(([key, val]) => { 
 
\t \t \t \t return (
 
\t \t \t \t \t <li 
 
\t \t \t \t \t \t key={key} 
 
\t \t \t \t \t \t className="country-item" > 
 
\t \t \t \t \t \t \t <div className="country-code">{key}</div> 
 
\t \t \t \t \t \t \t <ul className="space-list-items"> 
 
\t \t \t \t \t \t \t \t <li> 
 
\t \t \t \t \t \t \t \t \t <img 
 
\t \t \t \t \t \t \t \t \t \t className="flag" 
 
\t \t \t \t \t \t \t \t \t \t src={"http://www.geognos.com/api/en/countries/flag/"+key+".png"} 
 
\t \t \t \t \t \t \t \t \t \t alt={"Flag for " + val} 
 
\t \t \t \t \t \t \t \t \t /> 
 
\t \t \t \t \t \t \t \t </li> 
 
\t \t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </li> 
 
\t \t \t \t) 
 
\t \t \t })} 
 
\t \t </ul> 
 
\t) 
 
} 
 

 
class Selector extends React.Component { 
 
\t constructor(props) { 
 
\t \t super(props); 
 

 
\t \t this.state = { 
 
\t \t \t selectedRegion: null, 
 
\t \t \t countryCodes: null 
 
\t \t } 
 

 
\t \t this.updateRegion = this.updateRegion.bind(this); 
 
\t \t this.updateCountries = this.updateCountries.bind(this); 
 
\t \t this.updateBoth = this.updateBoth.bind(this); 
 
\t } 
 

 
\t updateRegion(region) { selectedRegion: region } 
 

 
\t updateCountries(countries) { countryCodes: countries } 
 

 
\t updateBoth(updateRegion, updateCountries) { 
 
\t \t this.setState(() => { 
 
\t \t \t return { 
 
\t \t \t \t selectedRegion: updateRegion, 
 
\t \t \t \t countryCodes: updateCountries 
 
\t \t \t } 
 
\t \t }) 
 
\t } 
 

 
\t render() { 
 
\t \t return (
 
\t \t \t <div> 
 
\t \t \t \t <SelectRegion 
 
\t \t \t \t \t selectedRegion={this.state.selectedRegion} 
 
\t \t \t \t \t onSelect={this.updateBoth} /> 
 
\t \t \t \t { !this.state.countryCodes 
 
\t \t \t \t \t ? "Select a region" 
 
\t \t \t \t \t : <CountryList countryCodes={this.state.countryCodes} /> } 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 
} 
 

 
ReactDOM.render(
 
\t <App />, 
 
\t document.getElementById('app') 
 
)

body { 
 
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif; 
 
} 
 

 
.container { 
 
    max-width: 1200px; 
 
    margin: 0 auto; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #d0021b; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
} 
 

 
.button { 
 
    color: #e6e6e6; 
 
    background: #0a0a0a; 
 
    border: none; 
 
    font-size: 16px; 
 
    border-radius: 3px; 
 
    width: 200px; 
 
    text-align: center; 
 
    display: block; 
 
    padding: 7px 0; 
 
    margin: 10px auto; 
 
} 
 

 
.button:hover:enabled { 
 
    background: linear-gradient(#1a1a1a,#0a0a0a); 
 
    color: #fff; 
 
    text-decoration: none; 
 
} 
 

 
.button:active { 
 
    transform: translateY(1px); 
 
} 
 

 
.regions { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
.regions li { 
 
    font-size: 1.5em; 
 
    margin: 10px; 
 
    font-weight: bold; 
 
    cursor: pointer; 
 
} 
 

 
.country-list { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
} 
 

 
.country-item { 
 
    margin: 20px; 
 
    text-align: center; 
 
} 
 

 
.country-code { 
 
    margin: 20px; 
 
    text-align: center; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Hello Express</title> 
 
    </head> 
 
    <body> 
 
    <div id="app"></div> 
 
    </body> 
 
</html>

Answer 1

空<ul></ul>必定意味着props.countryCodes沒有設置，爲Object.entries循環對我來說很好。該問題看起來像你的回調'updateBoth'是怪，onSelect={this.updateBoth}沒有傳遞參數到updateBoth(updateRegion, updateCountries)，所以你的狀態不能爲countryCodes設置任何值。

編輯

我可以用你的代碼工作做出：

function CountryList(props) { 
    console.log(props); 
    return (
     <ul className="country-list"> 
      { 
       Object.keys(props.countryCodes).map((key) => { 
        console.log(key); 
        return (
         <li 
          key={ key } 
          className="country-item" > 
          <div className="country-code">{key}</div> 
          <ul className="space-list-items"> 
           <li> 
            <img 
             className="flag" 
             src={"http://www.geognos.com/api/en/countries/flag/"+key+".png"} 
             alt={"Flag for " + props.countryCodes[key]} 
            /> 
           </li> 
          </ul> 
         </li> 
        ); 
       }) 

      } 
     </ul> 
    ) 
}