Xin chào Tôi gặp sự cố khi nhận dữ liệu được tìm nạp và sẵn có dưới dạng this.props.data để chuyển vào thành phần con <GoogleMaps /> và hiển thị lại khi dữ liệu đã thay đổi.React Redux, hiển thị lại sau khi dữ liệu được tìm nạp và ánh xạ vào thành phần?
Chỉ hoạt động vào lần đầu tiên biểu mẫu được gửi và dữ liệu được tìm nạp nhưng không phải lần nữa. Dữ liệu mới không khả dụng vì các cuộc gọi hàm render(){this.renderMap(this.props.data)} trước {this.renderData()}, tìm nạp và trả về và ánh xạ dữ liệu.
Tôi đã thử chuyển đổi nhưng có vẻ như hàm render() không đợi cho đến khi dữ liệu được tìm nạp trước khi gọi {this.renderMap(this.props.data)}. Tôi có nên chuyển dữ liệu đến thành phần GoogleMap theo một cách khác để cho phép tải lại dữ liệu mới bằng dữ liệu mới trước khi hiển thị không?
My renderData(); hoạt động tốt, trả về thành phần ListItem. Nó hoạt động mỗi khi biểu mẫu của tôi được gửi. Vấn đề là nhận được thành phần GoogleMaps để nhận thức được sự thay đổi và hiển thị lại này?
class Feature extends Component {
handleFormSubmit({ term, location }) {
this.props.fetchData({ term, location });
this.setState({showMap: true});
}
renderData() {
return this.props.data.map((data) => {
return (
<ListItem
key={data.id}
data={data} />
)
});
}
renderMap(data) {
if (this.state.showMap == true) {
const lon = data[0].location.coordinate.longitude;
const lat = data[0].location.coordinate.latitude;
return (
<GoogleMap
data={data}
lon={lon}
lat={lat} />
)
}
}
render() {
const { handleSubmit, fields: { term, location }} = this.props;
return (
<div>
<div>
<form className="form-inline" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
<fieldset className="form-group">
<label>Find:</label>
<input className="form-control" {...term} />
</fieldset>
<fieldset className="form-group">
<label>Location:</label>
<input className="form-control" {...location} />
</fieldset>
<button action="submit" className="btn btn-primary">Search</button>
</form>
</div>
<div className="map_container">
{this.renderMap(this.props.data)}
</div>
<ul className="list-group">
{this.renderData()}
</ul>
</div>
)
}
}
function mapStateToProps(state) {
return { data: state.data };
}
export default reduxForm({
form: 'search',
fields: ['term', 'location']
}, mapStateToProps, actions)(Feature);
Đây là hàm fetchData, tôi nhận được dữ liệu tốt.
export function fetchData({term, location}) {
return function(dispatch) {
axios.post(`${ROOT_URL}/data`, {term, location})
.then(response => {
dispatch({
type: FETCH_DATA,
payload: response
})
})
}
}
bạn có thể chỉ cho chúng tôi hàm 'fetchData()' không? – azium