地图是不是在JSX功能(map is not a function in jsx)

这个代码块引起地图的错误不是功能

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

我只是不明白这一点，我已经做了data &&检查被定义否则保持地图数据。 而且还data.devices || {} data.devices || {}来检查设备的属性是有或没有。

我console.log(data.devices)是返回不确定的，但它应该退回到一个对象吧？ 为什么它仍然打破？

Answer 1:

没有本地.map到{}所以更换data.devices || {} data.devices || {}到data.devices || [] data.devices || []

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

Answer 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的设备将被渲染。

文章来源: map is not a function in jsx