ReactJS(如果道具存在）

ReactJS if prop exists

本文关键字：存在 如果 ReactJS      更新时间：2023-09-26

目前我在React中遇到了一个错误，因为我正在从REST端点映射一个对象数组，而数组中的一些对象没有特定的道具。

一个例子是，我的一些对象中有另一个名为images的对象，而有些则没有。当我的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>
  );
};

因此，正如您所看到的，我有一个道具为props.vehicle.offers[0].image.name的img元素，但这失败了，因为我的一些对象没有这个对象。

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

<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 }}} />

这是我的组件，它迭代每个对象并将它们渲染到我的VehicleDetails组件：

// 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的最佳实践是什么吗？感谢

在呈现之前检查报价的长度。

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

我会这样做。在您的车辆组件中声明一个变量，该变量将保存缩略图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>
  );
};

其他道具我也会这么做。

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，则不会执行&&之后的语句，并且不返回任何要呈现的内容。

因此，它在props.vehicle.offers[0].image不为空时渲染img元素，防止了错误。

相关文章：