如何修复错误：“未定义项目”...答案

【问题标题】：How to fix Error: "item' is not defined..."如何修复错误：“未定义项目”...
【发布时间】：2018-12-23 19:50:18
【问题描述】：

假设返回组件通过获取字符串数组来实现下拉列表。使用数组元素的方式可能有些错误。

import React from 'react'

class DropDownList extends React.Component {
  renderDropDownList = () => {
    const { dropDownDownData } = this.props
    return (
       <div className="book-shelf-changer">
       <select>
          dropDownDownData.map(function(item){
            <option key = {item} value={item}>{item}</option>
          })
        </select>
      </div>
    )

  }
  render() {
    const optionList  = ['Move to...','Currently Reading','Want to Read','Read','None']
    return this.renderDropDownList(optionList)
  }
}

export  { DropDownList }

【问题讨论】：

尝试返回整个option 元素-> 只需在<option key={item}... 前面添加return。还可以尝试console.log(dropDownDownData) 来查看该变量是否实际上是一个字符串数组，或者您期望的任何内容
为什么你把这个常量写在花括号里？
@antdav 这是解构赋值？
这充满了错别字。 1）您忘记了内联 JS 表达式的地图周围的花括号。 2）您需要从地图回调中返回

标签： javascript reactjs

【解决方案1】：

我认为这只是因为您忘记了一些花括号来调用 dropDownData 函数，并且您的函数没有被解释为 Javascript 函数。也为您的地图函数添加一个返回值。

它应该适用于这个：

<select>
   {dropDownDownData.map(function(item){
      return (<option key = {item} value={item}>{item}</option>);
   })}
 </select>

您也可以为地图表达式使用 ES6 语法：

 <select>
   {dropDownDownData.map(item => (<option key = {item} value={item}>{item}</option>))}
 </select>

【讨论】：

我改了代码...浏览器写：TypeError: dropDownDownData is undefined