map 不是 jsx 中的函数答案

【问题标题】：map is not a function in jsxmap 不是 jsx 中的函数
【发布时间】：2018-03-10 21:59:36
【问题描述】：

这段代码导致map is not a function的错误

 {data && (data.devices || {}).map((obj, i) => 
    <div>{obj.name}</div>
 )}

我只是不明白，我已经做了data && 来检查数据是否已定义，否则请保留地图。还有data.devices || {} 检查设备属性是否存在。

我console.log(data.devices) 是返回未定义但它应该回退到一个对象，对吧？为什么还是坏掉？

【问题讨论】：

.map 是数组上的函数，而不是对象上的函数。将其更改为data.devices || []
@NicholasTower 试过了，还是一样，上面写着Cannot read property 'map' of undefined
原来你说的错误是map is not a function。您说更改后它“仍然相同”，但就是Cannot read property 'map' of undefined。您能否澄清错误是否已更改？
问题是data && (data.devices || {}) 或data && (data.devices || []) 如果数据为空则返回空。这就是您收到Cannot read property 'map' of undefined 的原因

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

没有原生的.map到{}，所以替换data.devices || {}到data.devices || []

{(data && data.devices || []).map((obj, i) => 
    <div>{obj.name}</div>
)}

【讨论】：

如果数据甚至没有名为 devices 的属性，这项工作是否可行？
是的，在这种情况下，地图将在一个空数组上运行。

【解决方案2】：

在这种情况下map 不是函数，因为当data.devices 为空时，默认值为空对象，因此map 不是对象的函数。以此为例：

// simulate scenarios
const data00 = undefined;
const data01 = {};
const data02 = { devices: null };
const data03 = { devices: [] };
const data04 = { devices: [{ name: 'device01' }, { name: 'device02' }] }


class Main extends React.Component {
  render() {
    return (
      <div>
        {this.load(data00)}
        {this.load(data01)}
        {this.load(data02)}
        {this.load(data03)}
        {this.load(data04)}
      </div>
    );
  }
  
  /**
   * Loads data and renders the devices if there's any
   */
  load(data) {
    return (!!data && data.devices || []).map((obj, i) => 
       <div key={i}>{obj.name}</div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById('main'));

<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>
<div id="main"/>

如您所见，只会渲染data04 的设备。

【讨论】：