通过对象映射以在React中呈现组件

Question

我正在尝试基于OpenWeatherMap API创建一个应用程序。对于每一天，我打算渲染一个将呈现数据的组件。我设法在中午过滤掉每天的数据，我可以成功将其登录到控制台，但是，我无法通过此对象进行映射并将其作为组件渲染出来。

代码（特别是渲染部分受到影响）：

class App extends Component {
  state = {
    address: "City name",
    lat: null,
    lng: null,
    data: {}
  };

  onChange = address => this.setState({
    address
  });

  handleFormSubmit = e => {
    e.preventDefault();
    geocodeByAddress(this.state.address)
      .then(results => getLatLng(results[0]))
      .then(latLng => {
        const lat = latLng.lat;
        const lng = latLng.lng;
        this.setState({
          lat,
          lng
        });
        fetch(
            `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`
          )
          .then(response => response.json())
          .then(data => {
            const dataWeather = data;
            this.setState({
              data: dataWeather.list
            });
          });
      })
      .catch(error => console.error("Error", error));
  };

  render() {
      const inputProps = {
        value: this.state.address,
        onChange: this.onChange
      };
      const weatherData = this.state.data;

      return (
        <div className="App">
          <h1> Weather application </h1>
            <span className="lead"> Get current weather of your location </span>
            <Form
              handleFormSubmit = { this.handleFormSubmit }
              inputProps = { inputProps }
            />
            <Weather />
          <ul>
            {
              [...weatherData].map((data) => {
                const myValues = data.dt_txt;
                const realHour = myValues.substring(10); 
                const hours = realHour.indexOf("12:00:00") > -1;
                console.log(hours); // true or false value
                hours === true ? console.log(data) : false;

                hours === true ? [...data].map((day, key) => console.log(day, key)) : false // This gives a true / false value
                hours === true ? [...data].map((day, key) => <WeatherTile date={data.dt_txt}/>) : false // This gives a true / false value

                })
              }
          </ul>
        </div>
          );
        }
      }

      export default App;

登录控制台的内容： IMAGE

正如我在代码中的评论所述：

hours === true ? console.log(data) : false;

实际记录正确日期的数据（即4月24日中午12点，中午12点等，等等。）

但行

hours === true ? [...data].map((day, key) => console.log(day, key)) : false 

提供真实/错误的响应，实际上影响它的工作方式（实际上不是渲染组件）

如何在每个中午实际渲染组件？