Question

目前我正在使用React收到错误，因为我正在从REST端点映射一个对象数组，并且数组中的某些对象没有某些道具。

一个例子是我的一些物体中有另一个物体叫images而另一些物体不在。{0}。当我的React组件尝试渲染没有images的对象时，我留下了一个错误未定义道具。

这是我的组件，它呈现我的道具：

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元素，其支柱为props.vehicle.offers[0].image.name但是由于我的某些对象无法使用此对象，因此会失败。

到目前为止，我已经尝试添加一个内联条件，只是为了查看对象是否先存在但是这个失败并出现错误：

<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>
  );
};

知道React JS的最佳做法是做什么的？感谢

Answer 1

在渲染之前检查商品的长度。

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

Answer 2

我这样做。在您的车辆组件中声明一个可以保存缩略图网址的变量。

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 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 && <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不为空时，它会呈现props.vehicle.offers[0].image元素，从而防止出错。

如果道具存在，则为ReactJS

3 个答案: