javascript - React Redux，在获取数据并将其映射到组件后重新渲染？

Question

您好，我在获取数据并作为 this.props.data 传递给子组件时遇到问题 <GoogleMaps />并在数据更改时重新渲染。

它只在第一次提交表单和获取数据时起作用，但不会再次起作用。自 render() 以来，新数据不可用。函数调用 {this.renderMap(this.props.data)}之前{this.renderData()} ，它获取并返回并映射数据。

我尝试切换它们，但看起来 render() 函数在调用 {this.renderMap(this.props.data)} 之前没有等到数据被获取.我是否应该以不同的方式将数据传递给 GoogleMap 组件，以允许它在呈现之前重新加载新数据？

我的渲染数据()；工作正常，返回组件 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 
            })
        })
    }
}

Answer 1

终于解决了。 ComponentsWillReceiveProps 成功了。必须使用 nextProps 调用 ComponentsWillReceiveProps 并调用 setState 将数据设置为 nextProps.data。

这让我可以使用数据来呈现 GoogleMaps 经纬度坐标并设置每个标记。