时间戳

首页 > 解决方案 > 为什么反应不条件渲染

javascript - 为什么反应不条件渲染

问题描述

所以我在尝试渲染这个列表时遇到了一个问题，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;

在此处输入图像描述

标签： javascriptreactjs

解决方案

好的，所以我不完全确定，但我尽量不在ifDOM 中使用语句。试试这种风格的条件：

    <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 语句。这样，您甚至不需要{}在 map 函数中包含 s 。另外，不要忘记为任何映射元素添加唯一键！

推荐阅读