Question

我刚刚开始使用React。我成功地使用axios从http获取数据并使用动作来推送数据。我可以在mapStateToProps输出数据，但不会将数据设置为类中的prop。这是我的代码，其中包含有关数据可用性的评论。

import React from 'react';
import { connect } from 'react-redux';
import { fetchCountries } from '../../actions/actions';
import _ from 'lodash';

class TheClass extends React.Component
{
    constructor(props)
    {
        super(props);
    }

    componentDidMount()
    {
        this.props.fetchCountries();
        console.log('Fetching', this.props.countries);      // !! UNDEFINED !!
    }
}
function mapStateToProps(state)
{
    console.log('Countries:', state.countries)                // -> I get the data
    return { countries: state.countries }
}

export default connect(mapStateToProps, { fetchCountries })(TheClass);

actions.js

import axios from 'axios';

export const FETCH_COUNTRIES = `fetch_countries`;
const COUNTRIES_URL = `http://api.stagingapp.io/location/v1/public/country`;

export function fetchCountries()
{
    const request = axios.get(COUNTRIES_URL);
    console.log(request);                                // -> I get the data
    return {
        type: FETCH_COUNTRIES,
        payload: request
    }
}

Answer 1

fetchCountries 是一种异步操作，因此您在调用 fetchCountries 之后就不能像在 componentDidMount 。

如果您在连接功能中获得结果，那么您将在成功进行网络呼叫后获得渲染功能的结果。

把你的控制台放在这里：

render() { console.log('Fetching', this.props.countries); }

Answer 2

我认为state.countries可以通过fetchCountries()中异步 HTTP请求获得的任何响应填充fetchCountries()。

只有在此请求结算后，您才能获得国家/地区数据。当您致电countries并且之后立即尝试打印from scapy.all import IP, sniff from scapy.layers import http def process_tcp_packet(packet): ''' Processes a TCP packet, and if it contains an HTTP request, it prints it. ''' if not packet.haslayer(http.HTTPRequest): # This packet doesn't contain an HTTP request so we skip it return http_layer = packet.getlayer(http.HTTPRequest) ip_layer = packet.getlayer(IP) print '\n{0[src]} just requested a {1[Method]} {1[Host]}{1[Path]}'.format(ip_layer.fields, http_layer.fields) # Start sniffing the network. sniff(filter='tcp', prn=process_tcp_packet)的值时，请求尚未解决（获得响应），这就是您不会获得任何数据的原因。

Answer 3

您的获取国家/地区请求异步请求，因此您不能指望国家在调用fetchCountries（）函数后立即存储。当来自api的国家数据到达时，您将获得国家数据。

Answer 4

你的函数getCountries返回一个对象，其中有效负载= axise返回的Promise，所以你在调用函数时没有数据。要生成异步请求，您应该添加redux-thunk中间件，然后在组件文件中创建一个函数

const mapStateToProps = (dispatch) => ({
    fetchCountries: bindActionsCreator(fetchCountries, dispatch)
})

并将第二个参数中的此函数传递给connect函数。

在你的actions.js中改变你的函数getCountries如下：

export const fetchCountries = () => (dispatch) => {
    dispatch({type: FETCH_START})
    axios.get(COUNTRIES_URL)
        .then(response => response.data)
        .then(data => dispatch({type: FETCH_COUNTRIES, payload: data})
        .catch(errors => dispatch({type: FETCH_ERRORS})
}

这样，在你的reducer中，你可以在请求开始时将变量loading设置为true，并在解析/拒绝Promise时将此变量传递给false，之后你可以为组件创建一个条件以确保你有你的数据！

mapStateToProps不会在组件props中设置数据

4 个答案: