지도 jsx

Question

에서 함수가 아닙니다

이 코드 블록은지도의 오류가 함수

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

, 이미지도를 계속 다른 정의 된 데이터를 확인하기 위해 data && 않았다 난 그냥 이해가 안가 아니다 발생 . 또한 data.devices || {}을 사용하여 devices 속성이 있는지 확인하십시오.

I console.log(data.devices)은 정의되지 않은 반환 값이지만 객체로 대체해야합니까? 왜 여전히 부서지고 있니? data.devices가 비어있을 때, 기본 값이 빈 객체 따라서 map 때문에

Answer 1

이 {}에 네이티브 .map 없기 때문에이 경우 data.devices || []

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

Answer 2

에 data.devices || {} 교체 map A는 기능하지 않습니다하지 않습니다 함수를 호출합니다. 예를 들어이 걸릴 : 당신이 볼 수 있듯이

// 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의 장치가 렌더링됩니다.