Question

您好我无法获取数据并将其作为this.props.data传递给子组件<GoogleMaps />并在数据发生更改时重新渲染。

它仅在第一次提交表单并且获取数据时才有效，但不会再次提取。由于render()函数在{this.renderMap(this.props.data)}之前调用{this.renderData()}，因此新数据不可用，它会提取并返回并映射数据。

我尝试切换它们，但看起来render（）函数在调用{this.renderMap(this.props.data)}之前提取数据之前不会等待。我是否应该以不同的方式将数据传递给GoogleMap组件，以便在呈现之前使用新数据重新加载？

我的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 
            })
        })
    }
}

Answer 1

终于解决了这个问题。 ComponentsWillReceiveProps成功了。不得不使用ComponentsWillReceiveProps致电nextProps并致电setState将数据设置为nextProps.data。

这允许我使用数据来渲染GoogleMaps lat长坐标并设置每个标记。

Answer 2

使用ComponentsWillReceiveProps并将你的道具传递给组件的状态很少是个好主意。你能告诉我们你的减速机代码吗？也许你正在改变你的状态，这可能导致组件在你期望它们时不会重新渲染。

此外，您不需要将道具传递给renderMap {this.renderMap(this.props.data)}。默认情况下，renderMap可以访问this.props。

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

2 个答案: