どのように反応コンポーネントの小道具にアクセスするには？

Question

import React, { Component } from 'react'; 

class newsList extends React.Component { 

    render(){ 

     return(
      <div> 
       {JSON.stringify(this.props.arr)} 
      </div> 
     ) 
    } 

} 

export default newsList; 

上記のコードでは、arrは別のコンポーネントからのオブジェクトです。 JSON.stringify(this.props.arr.result)を使用してデータを表示することができます。しかし、私がJSON.stringify(this.props.arr.result.id)でそれを変更するとすぐに、私はTypeError: this.props.arr.result is undefinedと言うエラーが出ています。私はここで間違っていることを理解できませんか？

Answer 1

がthis.props.arr配列であるでしょうか？ もしそうであれば、レンダリング機能は

render(){ 
    var ids = this.props.arr.map(e=>(<div>e.result.id</div>)) 
    return(
     <div> 
      {ids} 
     </div> 
    ) 
} 

Answer 2

は、代わりにこのコードを試してみてください：

class NewsList extends React.Component { 
    constructor(props) { 
     super(props); 
     this.props = props; 
    } 
    render() { 
     return <div>{this.props.arr}</div>; 
    } 
} 

それは最初のパラメータだとしてA React.Componentのconstructorは常にpropsを受け取ります。

Answer 3

ある時点では、this.props.arrはundefinedであるが、最終的に値が割り当てられることはほぼ肯定的です。最初のレンダリングにはnullまたはundefinedが返されますが、存在しないキーにもう1歩進んだ場合は、そのエラーがスローされます。ブール値を使って、最初にレンダリングされるものを制御することができます。代わりに、このコード行の

：

{this.props.arr ? JSON.stringify(this.props.arr) : null} 

編集：あなたの問題はthis.props.arr.result.idである

{JSON.stringify(this.props.arr)} 

はこれをみては？もしそうなら、この代わりに

{this.props.arr.result ? JSON.stringify(this.props.arr.result.id) : null}