2016-08-08 3 views
2

react-json-table을 사용하여 react/redux 프로젝트에서 간단한 데이터 테이블을 작성하려고합니다. 내 구성 요소 내에서 직접 데이터를 전달할 때 모든 것이 잘 작동합니다. 그러나 props을 사용하면 테이블이 표시되지 않습니다. 그것은 잘 작동하고유효한 소품을 얻기 위해 소품을 전달하는 방법 [Object]

var data = [{'alpha': 82, 'bravo': 20, 'charlie': 68}]; 
<JsonTable rows={ data } /> 

: 나는 데이터를 하드 코딩있을 때

그래서 여기 내 코드입니다.

그러나이 똑같은 데이터를 직접 <JsonTable rows={ props } />과 같이 전달하면 작동하지 않습니다. 내 소품을 console.log({props})으로 확인했습니다. 잘 작동합니다.

어떤 아이디어가 있습니까? 소품을 사용하기 전에 소품을 특정한 방법으로 포맷해야합니까?

감사합니다.

+1

이 당신의 소품 객체 또는 배열입니다. ? 'console.log (typeof props)'와'console.log (props)'를 할 때 출력되는 내용은 무엇입니까? console 문에 소품을 둘러싸는 중괄호가 없는지 확인하십시오. –

+0

이므로 typeof는 Object입니다. 그리고'console.log (props)'를 할 때 나는 Object {alpha : 82, bravo : 20, charlie : 68}를 얻었습니다. 그래서 객체라고 생각합니다. 배열이 필요합니다. 이게 내 문제 야? –

+0

예. 이 구성 요소에 배열로 데이터를 전달하는지 확인하십시오. –

답변

1

하면이 구성 요소에 소품에 배열로 데이터를 전달되었는지 확인 :

<JsonTable rows={[props]}/> 
+0

괜찮 았어! 미안하지만, 나 자신을 발견 할 수 있었어. 그래서 배열과 객체 사이의 차이점은 [..] 또는 {...} 정도입니까? –

+1

자바 스크립트에서 배열은 대괄호'[]'로 선언되고 중괄호'{}'로 된 리터럴 객체로 선언됩니다. 배열의 키는 인덱스 (0,1,2 등)이며 객체의 키는 문자열 ({ 'myKey': 'myValue'}) 또는 정수가 될 수 있습니다. 귀하의 경우'JsonTable'은 각 행을 나타내는 객체 배열을 기대하고 객체를 제공 했으므로 구성 요소가 파손되었습니다. –

관련 문제