대하여 반복 반응 요소

Question

I 슈퍼 간단한이 아래와 같은 원소를 반응 가지고

const Stores = ({ stores }) => { 
    const renderStores =() => Object.keys(stores).map(store => {  
    return (
     <div key={store}> 
     { store }   
     </div> 
    ) 
    }) 

    return (
    <div> 
     { renderStores() } 
    </div> 
) 
} 

는 소품과 반복을 통해 등 (그것이 POJO 아닌 배열이다) stores 취하는 그 열쇠는 상점의 이름을 표시합니다. 내가 요소를 이런 식으로 반응 쓸 때

문제가되면, stores이 정의되어 있지 않거나 내 응용 프로그램이 시점에서 null이 될 수 있고 당신이 정의되지 않았거나 널 (null)을 반복 할 수 없기 때문에이 오류가 발생하는 Object.keys 원인 .

내가 원하는 것은 에 대한이 반응 구성 요소의 동작이 인 경우 stores이 정의되지 않았거나 null 인 경우입니다.

나는 나의 renderStores 기능을 포장하고 정의되지 않은/널 (null)를 확인해야 할 필요성을 피하기 위해 싶습니다

const Stores = ({ stores }) => { 
    const renderStores =() => { 
    if (stores) { 
     return Object.keys(stores).map(store => {  
     return (
      <div key={store}> 
      { store }   
      </div> 
     ) 
     }) 
    } else { 
     return <div></div> 
    }  
    } 

    return (
    <div> 
     { renderStores() } 
    </div> 
) 
} 

을하지만이 눈에 쉽지 않다.

내가 대신이 작업을 수행 할 수 있습니다 :

return (
    <div> 
    { stores ? renderStores() : '' } 
    </div> 
) 

하지만이 상용구처럼 보인다.

더 나은 방법이나 일반적인 규칙을 사용하면 반응이없는 요소로 반복하기 위해 undefined/null을 전달할 때 Object.keys()에서 오류가 발생하지 않도록 보호 할 수 있습니까? stores이 null 또는 undefined입니다

Answer 1

경우, '그것은 falsy, 그리고 당신은 당신이 같으면, 더 반복

Object.keys(stores||{}).map(... 

일이 없을 것이다 논리적 사용할 수 있습니다하거나 더 키가없는 것이다, 대신 빈 개체를 사용하여 그러나 빈 요소를 얻으려면 그 조건이 필요합니다.

Answer 2

처음에는 올바른 관리 방법이라고 생각합니다.

const Stores = ({ stores }) => { 
    const renderStores =() => { 
    if !(stores) return null; 
    return Object.keys(stores).map(store => (
     <div key={store}> 
     { store }   
     </div> 
    ))  
    } 

    return (
    <div> 
     { renderStores() } 
    </div> 
) 
} 

이 더 stores이없는 경우 null을 반환 그냥 <div></div>를 렌더링 : 나는 문제는, 당신은이 방법으로 물건을 조금 정리할 수있는 모습입니다.

당신은 또한이 같은 주장에 기본을 추가 할 수 있습니다

const Stores = ({ stores = {} }) => { 

이 당신이 기본적으로 키의지도에서 아무것도 돌려주지 할 수있다.

stores이 null 인 경우 세 번째 옵션은 부모로부터 stores을 렌더링하지 않는 것입니다. 잠재적으로 가장 깨끗한 옵션입니다.

// parent.js 

{ data ? <Stores stores=data /> : null } 

// stores.js 
const Stores = ({ stores }) => (
    <div> 
    { 
     Object.keys(stores).map(store => (
     <div key=store> 
      {store}   
     </div> 
    )) 
    } 
    </div> 
) 

빈 상태로 유지해야하는 경우 조건부를 잘못 반환 할 수 있습니다.

저는 이것을 매우 다양한 방법으로 수행합니다.