Question

所以我在尝试渲染此列表时遇到问题，item.cars，item.yachts和item.villas是数字，这可能是为什么没有完全显示任何内容的原因？

const renderItems = (locations) => {
<div className={styles.list}>
  {locations.map((item) => {
    if (item.cars != 0 || item.yachts != 0 || item.villas != 0)
      return (
        <DestinationItem
          id={item.id}
          image={Image[item.id]}
          name={item.name}
          subtitle={item.description}
          description={DESTINATIONS_DESCRIPTION[item.id]}
        />
      );
    return null;
  })}
</div>;
};

这是位置对象中的一项

cars: 0
description: "(Miami, Palm Beach, Broward)"
id: 3
name: "South Florida"
photo: "http://l.amazonaws.com/areaphotos/Audi_R8_a.jpg"
villas: 69
yachts: 53
__proto__: Object

这是整个组件代码：

const Destinations = locations => {
 const renderItems = (locations) => {
  <div className={styles.list}>
  {locations.map(
    (item) =>
      (item.cars != 0 || item.yachts != 0 || item.villas != 0) && (
        <DestinationItem
          id={item.id}
          key={item.id}
          image={Image[item.id]}
          name={item.name}
          subtitle={item.description}
          description={DESTINATIONS_DESCRIPTION[item.id]}
        />
      )
  )}
</div>;

console.log(locations, 'data');
return (
  <div className={styles.mainContainer}>
    <div className={styles.title}>
      <h1>Pick Your Destination</h1>
        </div>
        {renderItems(locations)}
      </div>
    );
  };
};

export default Destinations;

Answer 1

好的，所以我不太确定，但是我尽量不要在DOM中使用if语句。请尝试以下这种有条件的方式：

    <div className={styles.list}>
  {locations.map((item) => 
        (item.cars != 0 || item.yachts != 0 || item.villas != 0) && (
            <DestinationItem
              id={item.id}
              key={item.id}
              image={Image[item.id]}
              name={item.name}
              subtitle={item.description}
              description={DESTINATIONS_DESCRIPTION[item.id]}
            />)
  })
</div>;

&&运算符充当if语句。这样，您甚至不需要在地图函数中包含{}。另外，不要忘记为任何映射元素添加唯一键！

Answer 2

Destinations组件以locations作为道具，对吗？在这种情况下，您将需要destructure props对象，如下所示：

const Destinations = ({ locations }) => {

或这个

const Destinations = props => {
  const { locations } = props

或仅使用props对象并分别访问字段：

const Destinations = props => {
  // ...
  return (
    // ...
    {renderItems(props.locations)}
    // ...
  )
}

此外，renderItems函数在其周围有花括号，因此您需要使用return从中返回一个值。由于没有undefined，它目前正在返回return。

const renderItems = (locations) => {
  return (
    <div className={styles.list}>
      {locations.map((item) => {
        if (item.cars !== 0 || item.yachts !== 0 || item.villas !== 0)
          return (
            <DestinationItem
              id={item.id}
              image={Image[item.id]}
              name={item.name}
              subtitle={item.description}
              description={DESTINATIONS_DESCRIPTION[item.id]}
            />
          );
        return null;
      })}
    </div>
  );
};

或者您可以使用箭头功能的concise form，并用括号代替大括号：

const renderItems = (locations) => (
  <div className={styles.list}>
    {locations.map((item) => {
      if (item.cars !== 0 || item.yachts !== 0 || item.villas !== 0)
        return (
          <DestinationItem
            id={item.id}
            image={Image[item.id]}
            name={item.name}
            subtitle={item.description}
            description={DESTINATIONS_DESCRIPTION[item.id]}
          />
        );
      return null;
    })}
  </div>
);

作为一个旁注，您几乎总是想使用严格的相等运算符（===和!==）而不是抽象的相等运算符（==和!= ）。后者的名称为share of pitfalls，例如'1' == 1是正确的，就像[[]] == 0一样的unexpected things！

为什么会做出反应而没有条件渲染

2 个答案: