时间戳

首页 > 解决方案 > 映射存储在 Redux 存储中的 JSON 对象？

javascript - 映射存储在 Redux 存储中的 JSON 对象？

问题描述

我想映射一个对象，以便在我的 JSX 中可以访问它所说的每个地方的值value。该对象存储为 const {weather} = this.props。这是 JSX：

render() {
const { weather } = this.props;

return (
  <div className='card border-secondary mb-3'>
    <div className='card-header text-white bg-secondary'>City Information</div>
    <div className='card-body'>
    Lat/Long:
    <div className="dropdown-divider"></div>
    <div className='row'>
    <div className='col-md-4 text-center'>
    <h5>Tempurature (F)</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <div className='col-md-4 text-center'>
    <h5>Low (F)</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <div className='col-md-4 text-center'>
    <h5>High (F)</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    </div>
    <div className='row'>
    <div className='col-md-4 text-center'>
    <h5>Pressure</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <div className='col-md-4 text-center'>
    <h5>Humidity</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <div className='col-md-4 text-center'>
    <h5>Wind Speed</h5>
    <h6 className ='text-info'>value</h6>
    <h5>Lat</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    <h5>Long</h5>
    <h6 className ='text-info'>value</h6>
    </div>
    </div>
    </div>
    </div>
  </div>
);
}
}

我的对象如下所示：

{"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}

如何.map在我的对象上使用方法来呈现我想要显示的值？非常感谢。

标签： javascriptreactjsredux

解决方案

要映射对象的属性而不是通常的数组，您需要使用该Object.keys(this.props.weather).map(...)函数。这将为您提供天气对象的键名（即：坐标、风）。然后，您可以使用该名称来获取天气对象的属性，如下所示：this.props.weather[weatherPropertyKey].speed例如，对于“风”键。

这是一个小演示：

class Weather extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      weather: {"coord":{"lon":-95.37,"lat":29.76},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"base":"stations","main":{"temp":285.56,"pressure":1022,"humidity":67,"temp_min":283.05,"temp_max":287.15},"visibility":16093,"wind":{"speed":2.27,"deg":115.002},"clouds":{"all":1},"dt":1542935700,"sys":{"type":1,"id":2646,"message":0.0041,"country":"US","sunrise":1542977570,"sunset":1543015369},"id":4699066,"name":"Houston","cod":200}
    };
  }

  render() {
    return (
      <div>
        {this.state.weather &&
          Object.keys(this.state.weather).map((weatherPropertyKey) => {
            return <div><b>{weatherPropertyKey}</b> = {JSON.stringify(this.state.weather[weatherPropertyKey])}</div>;
          })}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <Weather/>,
  document.getElementById("react")
);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

推荐阅读