Reactの子コンポーネントへのオブジェクトのマッピング

Question

Reactの使用解析されたJSONファイルを渡してオブジェクトをマップしようとしています。しかし、私は私のデータ構造の最上位レベルにアクセスすることができるよ、これを使用して

const question = Object.keys(questions).map((data, index) => 
    <QuestionList questions={data} key={index} /> 

：それは私だけで以下のようにObject.keysを使用してオブジェクトをマッピングすることができるオブジェクトであるとして、しかし、見て。だからこのコードを使用して、私のオブジェクトを渡します。 Object.keys（）を使用すると、「質問」や「q1」やタイプ、テキスト、qIdなどしかアクセスできません。すべてのオブジェクトプロパティを一度に渡すことはできず、子コンポーネントで必要なものを指定することはできません。私は子コンポーネントでこれらを使用できるように、子プロパティを持つオブジェクト全体を渡すための最も簡単な方法は何でしょう

"questions": { 
    "q1": { 
     "qId": "1", 
     "type": "YN", 
     "text": "Text 1", 
     "tip": { 
     "logo": "assets/icons/gadgetz.svg", 
     "logofallback": "assets/img/gadgetz.png", 
     "heading": "Heading 1", 
     "text": "Text 2" 
     } 
    },... 

？私は小道具以外の何かを使わなければならないのですか？

Answer 1

const questionObjects = Object.values(JSON.stringify(theJSONinYourQuestion)); 

const questionComponents = questionObjects.map(question => <Question qId={question.qId} />); 

基本的には、代わりにObject.keysのObject.valuesを使用して、あなたが使用できる質問の素敵な配列を持っています。

編集は：お使いの環境で利用可能なObject.values(it is experimental)

const originalQuestions = JSON.stringify(theJSONinYourQuestion); 
const questionKeys = Object.keys(orginalQuestions); 
const questionObjects = questionKeys.map(key => originalQuestions[key]); 
... 

Answer 2

を持っていない場合は、その範囲外の変数に割り当てることによって.MAPの内側に質問オブジェクトへのアクセスを維持することができます。 Here's a jsBinアイデアを表示

const objectOfQuestions = { 
    "questions": { 
     "q1": { 
      "qId": "1", 
      "type": "YN", 
      "text": "Text 1", 
      "tip": { 
       "logo": "assets/icons/gadgetz.svg", 
       "logofallback": "assets/img/gadgetz.png", 
       "heading": "Heading 1", 
       "text": "Text 2" 
      } 
     }, 
     "q2": { 
      "qId": "2", 
      "type": "YN", 
      "text": "Text 1", 
      "tip": { 
       "logo": "assets/icons/gadgetz.svg", 
       "logofallback": "assets/img/gadgetz.png", 
       "heading": "Heading 1", 
       "text": "Text 2" 
      } 
     } 
    } 
} 

const Question = ({ id, question }) => { 
    return (
    <div> 
     <h1>Question: {id}</h1> 
     <p>id: {question.qId}</p> 
     <p>type: {question.type}</p> 
     <p>text: {question.type}</p> 
    </div> 
) 
} 

const QuestionList = ({ questions }) => { 
    const questionObj = questions; 
    return (
    <div> 
     {Object.keys(questions.questions).map((key, i) => { 
     return (
      <div key={key}> 
      <Question id={key} question={questionObj.questions[key]} /> 
      </div> 
     ); 
     })} 
    </div> 
); 
} 

ReactDOM.render(<QuestionList questions={objectOfQuestions} />, document.getElementById('app'));