Question

如果isDayTime等于true，则尝试有条件地从数组对象中呈现值。

尝试了.filter和.map，但是我认为我做的不正确。

    const weather = this.props.weather.weatherData;
    return weather.map(weather => {
      if (weather.isDayTime === true) {
        return (
          <div className="ui segment">
            <div className="ui center grey aligned header">TheDay</div>
            <div className="ui center grey aligned header">
              <i className="sun icon" />
            </div>
            <div className="ui center grey aligned sub header">
              Min:75° Max:80°
            </div>
          </div>
        );
      }
    });
  }
}

Answer 1

在weatherData上使用过滤器，并返回符合条件的项目。

const weatherData = this.props.weather && this.props.weather.weatherData || [];
const weather = weatherData.filter(weather => weather.isDayTime === true);

return weather.map(weatherItem => {

    return (
      <div className="ui segment">
        <div className="ui center grey aligned header">TheDay</div>
        <div className="ui center grey aligned header">
          <i className="sun icon" />
        </div>
        <div className="ui center grey aligned sub header">
          Min:75° Max:80°
        </div>
      </div>
      );
    }
  });
}

Answer 2

你能做的是

1-首先过滤数据，然后在渲染器中映射过滤的数据。

const weather = this.props.weather.weatherData;
const weatherFiltered = weather.filter( ({ isDayTime }) => isDayTime );

return weather.map(weather => {
    return (
      <div className="ui segment">
        <div className="ui center grey aligned header">TheDay</div>
        <div className="ui center grey aligned header">
          <i className="sun icon" />
        </div>
        <div className="ui center grey aligned sub header">
          Min:75° Max:80°
        </div>
      </div>
    );
});

2-在渲染中映射，当您不希望渲染项目时返回null。

return weather.map(weather => {
  if (weather.isDayTime === true) {
    return (
      <div className="ui segment">
        <div className="ui center grey aligned header">TheDay</div>
        <div className="ui center grey aligned header">
          <i className="sun icon" />
        </div>
        <div className="ui center grey aligned sub header">
          Min:75° Max:80°
        </div>
      </div>
    );
    return null
  }
});

如何根据数组对象内部的属性进行过滤？

2 个答案: