在页面加载时,我得到的值有点像这样
{
...,
"availabilities": [
{
"date": "2017-09-22",
"start_time": "07:45 AM",
"map_img_url": "gogia_event_maps.jpg",
"redirect_url": "someplace,
"lat": "19.0480326",
"lng": "72.9169889",
"formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
},
{
"date": "2017-10-15",
"start_time": "07:45 AM",
"map_img_url": "gogia_event_maps.jpg",
"redirect_url": "/Raheja+Acropolis+2",
"lat": "19.0480326",
"lng": "72.9169889",
"formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
},
{
"date": "2017-10-21",
"start_time": "05:01 AM",
"map_img_url": "gogia_event_maps.jpg",
"redirect_url": "https://www.google.co.in/maps/place/Raheja+Acropolis+2",
"lat": "19.0480326",
"lng": "72.9169889",
"formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
},
{
"date": "2017-10-22",
"start_time": "05:02 AM",
"map_img_url": "/gogia_event_maps.jpg",
"redirect_url": "Raheja+Acropolis+2",
"lat": "19.0480326",
"lng": "72.9169889",
"formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
}],
...
}
我的UI有一个select组件,用户可以从中选择JSON之上的不同日期格式。 我需要的只是我剩下的UI组件还应该根据日期的选择进行更改吗?
答案 0 :(得分:1)
我认为您在更改状态时更新状态的元素是什么。我认为你的问题是你试图将整个对象从状态放入数组中。但是您应该只在输出上过滤数组以显示正确的值。
class SlectElement extends React.Component {
constructor(props) {
super(props);
this.state = {
availabilities: []
}
this.updateAvailabilities = this.updateAvailabilities.bind(this);
}
updateAvailabilities(e) {
const stateCopy = Object.assign({}, this.state);
stateCopy.availabilities = e.target.value;
return this.setState(stateCopy);
}
render() {
const availabilities = [
{
"date": "2017-09-22",
"start_time": "07:45 AM",
"map_img_url": "gogia_event_maps.jpg",
"redirect_url": "someplace",
"lat": "19.0480326",
"lng": "72.9169889",
"formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
},
{
"date": "2017-10-15",
"start_time": "07:45 AM",
"map_img_url": "gogia_event_maps.jpg",
"redirect_url": "/Raheja+Acropolis+2",
"lat": "19.0480326",
"lng": "72.9169889",
"formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
},
{
"date": "2017-10-21",
"start_time": "05:01 AM",
"map_img_url": "gogia_event_maps.jpg",
"redirect_url": "https://www.google.co.in/maps/place/Raheja+Acropolis+2",
"lat": "19.0480326",
"lng": "72.9169889",
"formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
},
{
"date": "2017-10-22",
"start_time": "05:02 AM",
"map_img_url": "/gogia_event_maps.jpg",
"redirect_url": "Raheja+Acropolis+2",
"lat": "19.0480326",
"lng": "72.9169889",
"formatted_address": "Dattaguru Society, Deonar, Opp Raheja Acropolis, Mumbai"
}];
console.log(availabilities.filter(av => av.date === this.state.availabilities)[0]);
return (<div>
<select
onChange={this.updateAvailabilities}>
{availabilities.map((item) => {
return (<option key={item.date} value={item.date}>{item.date}</option>);
})}
</select>
<br />
{availabilities.length ?
JSON.stringify(availabilities.filter(av => av.date === this.state.availabilities)[0])
: null
}
</div>);
}
}
ReactDOM.render(
<SlectElement name="World" />,
document.getElementById('container')
);
&#13;
<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>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
&#13;