ANT JS选择不显示值reactjs答案

【问题标题】：ANT JS select not displaying values reactjsANT JS选择不显示值reactjs
【发布时间】：2019-11-10 14:19:28
【问题描述】：

我是新来的反应。我需要在我的网页中进行选择。我有一个看起来像这样的数组，

databaseList =  ["information_schema", "ResumeParser", "analystor", "analystor_check", "mysql", "performance_schema", "plugin_testing", "sys", "wordpress"]

我想将此数组映射到Select。
在 HTML 中的普通 Select 中，它可以工作，这是代码，

<select >
    <option value='None'>None</option>
    {
        this.state.databaseList.map((database) => {
            return (<option value={database}>{database}</option>)
        })
    }
</select>

但是在Ant JS select，它显示错误，这是 Ant js 代码，

<Select mode="single" placeholder="Please select Database" style={{ width: '370px' }}>
    {
        this.state.databaseList.map((database) => {
            return (
                <Option value ={database}>
                    {database}
                </Option>)
        })
    }
</Select>

我得到的错误：

我不知道我在 AntJS 选择中做错了什么。我浏览了 Ant JS 文档，但无法解决我的问题。帮我解决一些问题。

【问题讨论】：

确保state.databaseList 数组中没有空白值（如果正在更新数组）。尝试在Select 渲染之前记录数组。
@Prakash Sharma，但在普通选择代码中，它会在下拉列表中显示值。在antjs选择代码中，它失败了。
请显示整个代码...显示一个可生产的示例，而不是 sn-ps
How to create a Minimal, Reproducible Example
你需要验证你的数据列表{ this.state.databaseList && Array.isArray(this.state.databaseList) && this.state.databaseList.map

标签： javascript html css reactjs antd

【解决方案1】：

您的代码应该可以工作，唯一的问题是databaseList 可能是undefined。

class App extends React.Component {
  state = {
    databaseList: [
      'information_schema',
      'ResumeParser',
      'analystor',
      'analystor_check',
      'mysql',
      'performance_schema',
      'plugin_testing',
      'sys',
      'wordpress'
    ]
  };

  render = () => {
    return (
      <Select
        mode="single"
        placeholder="Please select Database"
        style={{ width: '370px' }}
      >
        {Array.isArray(this.state.databaseList) &&
          this.state.databaseList.map(database => {
            return <Option value={database}>{database}</Option>;
          })}
      </Select>
    );
  };
}

【讨论】：

你不需要提供默认值， undefined 是不必要的。