こんにちは私は、取得したデータを取得することに問題があり、this.props.dataを子コンポーネント<GoogleMaps />
に渡し、データが変更されたときに再レンダリングすることができます。React Reduxは、データがフェッチされ、コンポーネントにマッピングされた後に再レンダリングされますか?
フォームが初めて送信され、データはフェッチされますが、再度フェッチされます。 render()
関数は、{this.renderData()}
の前に{this.renderMap(this.props.data)}
を呼び出し、データを取得して返し、マップするので、新しいデータは使用できません。
私はそれらを切り替えようとしましたが、{this.renderMap(this.props.data)}
を呼び出す前にデータがフェッチされるまでrender()関数が待機していないようです。 GoogleMapコンポーネントにデータを渡して、レンダリングする前に新しいデータを再ロードできるようにする必要がありますか?
My renderData();正常に動作し、コンポーネントListItem
を返します。私のフォームが提出されるたびに動作します。問題は、GoogleMaps
コンポーネントがこの変更を認識して再レンダリングすることですか?
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);
ここでfetchData関数を使用していますが、データを正しく取得しています。
export function fetchData({term, location}) {
return function(dispatch) {
axios.post(`${ROOT_URL}/data`, {term, location})
.then(response => {
dispatch({
type: FETCH_DATA,
payload: response
})
})
}
}
'fetchData()'関数を表示できますか? – azium