从对象反应生成 UI - console.log 工作但没有生成

Question

我的代码可以生成我的 React UI，它可以与语言列表一起生成语言选择复选框。例如在状态时

languages = {English: true, French: false} 

但是，当我将其更改为包含数据库中的值的对象时，我没有收到任何错误，但没有加载任何内容。

[
{
    "language_name": "English",
    "lang_num": 1,
    "checked": false
},
{
    "language_name": "Mandarin Chinese",
    "lang_num": 2,
    "checked": false
},
]

代码是：

       {   
        Object.entries(this.props.languages).forEach(([key, value]) => {
          console.log(this.props.languages[key].language_name),
          <label id="checkbox-margin">
            <input
              type="checkbox"
              value={this.props.languages[key].language_name}  
              checked={this.props.languages[key].checked}
              onChange={this.handleLangClick}
            /> {this.props.languages[key].language_name}
          </label>
      }
      )

console.log 很好地列出了每个语言字符串，我将它们全部打印在控制台中，但 UI 上没有生成任何内容。知道为什么吗？

谢谢！

Answer 1

尝试使用map函数遍历数组：

{this.props.languages ? this.props.languages.map(language => {
    return (
        <label id="checkbox-margin" key={language.lang_num}>
            <input
                type="checkbox"
                value={language.language_name}  
                checked={language.checked}
                onChange={this.handleLangClick}
            /> {language.language_name}
        </label>
    )}) : 'Loading languages...'
}