小道具がある場合ReactJS

Question

現時点では、RESTエンドポイントからオブジェクトの配列をマッピングしているため、配列内のオブジェクトの一部に特定の小道具がないため、Reactでエラーが発生しています。

私のオブジェクトの中にはimagesと呼ばれる別のオブジェクトがあり、そうでないものがあります。私のReactコンポーネントがimagesを使わないでオブジェクトをレンダリングしようとすると、私はエラーが残っています。しかし、これは私のオブジェクトのいくつかは、このオブジェクトが使用できていないと失敗しますが、私はprops.vehicle.offers[0].image.nameの小道具でimg要素を持って見ることができるように

const VehicleDetail = (props) => { 
    return (
    <div className={"col-flex-md-3 col-flex-sm-4 col-flex-xs-6 col-flex-media-query vehicle-item " + props.vehicle.brand.name} data-value={props.vehicle.brand.name}> 
     <div className="vehicle-container"> 
     <img src={"https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/" + props.vehicle.offers[0].image.name} /> 
     <h4 className="vehicle-title"> 
      {props.vehicle.model.name} 
     </h4> 
     <div className="row-flex"> 
      <div className="col-flex-xs-12 btn-container"> 
      <a href={"http://beaver" + props.vehicle.brand.name + ".co.uk/new/cars/" + props.vehicle.slug} target="_blank" className="learn-more-btn">Learn More</a> 
      </div> 
     </div> 
     </div> 
    </div> 
); 
}; 

：ここ

は私の小道具をレンダリング私のコンポーネントであります。ここで

<img src={"https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/" + {if (typeof props.vehicle.offers[0].image.name == "object") { props.vehicle.offers[0].image.name }}} /> 

は私のコンポーネントである各オブジェクトを反復処理し、私のVehicleDetailにそれらをレンダリングする：これまでのところ、私は、オブジェクトが最初に存在していたかどうかを確認するだけで、条件付きインラインを追加しようとしている

は、しかし、これはエラーで失敗しましたコンポーネント：

// Vehicle List Component 
import VehicleDetail from './vehicle-detail.js'; 

// Create our component 
const VehicleList = (props) => { 
    // Just add props.vehicle to access API data instead of static 
    const RenderedVehicles = props.vehicles.map(vehicle => 
    <VehicleDetail key={vehicle.slug} vehicle={vehicle} /> 
); 

    return (
    <div className="row-flex center-xs"> 
     {RenderedVehicles} 
     {console.log(props.brandSelect)} 
    </div> 
); 
}; 

リアクションJSのベストプラクティスはこれを行うことですか？ありがとう

Answer 1

私はこれを好きです。あなたの車両コンポーネントでは、サムネイルURLを保持する変数を宣言します。

const VehicleDetail = (props) => { 
    let vehicleThumbnail = ''; 

    if (props.vehicle.offers[0].image && props.vehicle.offers[0].image.name) { 
    vehicleThumbnail = props.vehicle.offers[0].image.name; 
    } 


    return (
    <div className={"col-flex-md-3 col-flex-sm-4 col-flex-xs-6 col-flex-media-query vehicle-item " + props.vehicle.brand.name} data-value={props.vehicle.brand.name}> 
     <div className="vehicle-container"> 
     <img src={vehicleThumbnail} /> 
     <h4 className="vehicle-title"> 
      {props.vehicle.model.name} 
     </h4> 
     <div className="row-flex"> 
      <div className="col-flex-xs-12 btn-container"> 
      <a href={"http://beaver" + props.vehicle.brand.name + ".co.uk/new/cars/" + props.vehicle.slug} target="_blank" className="learn-more-btn">Learn More</a> 
      </div> 
     </div> 
     </div> 
    </div> 
); 
}; 

他の小道具についても同じことをします。

Answer 2

レンダリングする前にオファーの長さを確認してください。

{props.vehicle.offers.length > 0 ? (
    <img src={url + props.vehicle.offers[0].image.name} /> 
) : null} 

Answer 3

props.vehicle.offers[0]月の正常な場合は、次のようになります。

{ 
    image: { 
    name: 'hello' 
    } 
} 

だから、あなたがエラーなしprops.vehicle.offers[0].image.nameを使用することができます。

しかし、いくつかの例は以下のとおりです。

{ 
    anotherProperty: { 

    } 
} 

props.vehicle.offers[0].imageはnullので、props.vehicle.offers[0].image.nameはエラーをスローnull.nameに等しいです。 props.vehicle.offers[0].imageがnullある

{ props.vehicle.offers[0].image && <img src={"https://s3-eu-west-1.amazonaws.com/pulman-vw-images/uploads/images/thumbnails/" + props.vehicle.offers[0].image.name} /> } 

場合は、&&後のステートメントが実行すること、およびレンダリングする何も返さないません。

問題を解決する簡単な方法は、このようなものです。

したがって、props.vehicle.offers[0].imageがnullでない場合、img要素をレンダリングして、エラーを防ぎます。