Question

这段代码导致地图错误不是函数

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

我只是没有得到它，我已经data &&检查数据已定义，否则保留地图。还data.devices || {}检查设备属性是否存在。

我console.log(data.devices)返回undefined但它应该回退到一个对象吗？为什么还在破？

Answer 1

GameObject到.map没有原生{}，因此将data.devices || {}替换为data.devices || []

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

Answer 2

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

＆＃13;

// 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'));

＆＃13;

<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"/>

＆＃13;

如您所见，只会呈现data04个设备。

map不是jsx中的函数

2 个答案: