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

Question

我想映射一个对象，这样值就可以在我的JSX中访问，它说的每一个地方都是value。对象存储为const {weather} = this.props。以下是联合来文：

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方法来呈现要显示的值？非常感谢。

Answer 1

要映射对象的属性而不是通常的数组，您需要使用Object.keys(this.props.weather).map(...)函数。这将给您天气对象的关键名称(即: coord，风能)。然后，您可以使用这个名称来获取天气对象的属性，例如：this.props.weather[weatherPropertyKey].speed作为'wind‘键。

下面是一个小小的演示：

​

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>

​

Answer 2

我想你误解了地图功能的作用。JavaScript对象基本上是一个映射，即键值对。使用mapStateToProps将存储在redux状态的对象映射到组件使用的支柱，然后像任何其他对象一样访问它，即this.props.stateObject.fieldValue