我想映射一个对象,以便值在value
的每个位置都可以在我的JSX中访问。该对象存储为常量{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
方法来呈现要显示的值?非常感谢。
答案 0 :(得分:1)
要映射对象的属性而不是通常的数组,您将要使用Object.keys(this.props.weather).map(...)
函数。这将为您提供天气对象的关键名称(即:coord,wind)。然后,您可以使用该名称来获取天气对象的属性,例如: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>
答案 1 :(得分:0)
我认为您误解了地图功能的作用。 JavaScript对象基本上是一个映射,即键值对。使用mapStateToProps
将存储在redux状态的对象映射到组件使用的道具,然后像访问其他任何对象一样访问它,即this.props.stateObject.fieldValue