我想创建一个简单的应用程序使用RN，这只是从API数据加载列表视图。其思想是：

• 我从我的Action中获取API，然后将其传递给负载上的reducer
• 在reducer上，我将数据传入我的组件
• 在我的组件上，我对componentWillMount执行getData函数
• 然后，在它加载后，我将使用此数据设置我的listView的dataSource

但问题是，数据不会加载。它是在调用componentWillMount时加载的，但是我不知道如何更新我的组件，或者如何检测在componentWillMount中的getData完成它的任务后创建的新 prop 。
这是我的代码片段

// 1) ProductCategoryAction.js

    
    export const getProductCategory = () => {
        return (dispatch) => {
            dispatch({ type: GET_PRODUCT_CATEGORY });

        fetch(CONFIG_GET_PRODUCT_CATEGORY_API)
            .then((response) => response.json())
            .then((responseJson) => getProductCategorySuccess(dispatch, responseJson.result))
            //.then((responseJson) => console.log(responseJson.result))
            .catch(() => getProductCategoryFail(dispatch));
    }
    };


    const getProductCategorySuccess = (dispatch, product_categories) => {
        dispatch({
            type: GET_PRODUCT_CATEGORY_SUCCESS,
            payload: product_categories
        });
    };
    const getProductCategoryFail = (dispatch) => {
        dispatch({ 
            type: GET_PRODUCT_CATEGORY_FAIL
        });
    };

// 2) ProductCategoryReducer.js

    export default (state=INITIAL_STATE, action) => {

    console.log(action);

    switch(action.type) {
        case GET_PRODUCT_CATEGORY:  
            return { ...state, loading: true, error:'' };
        case GET_PRODUCT_CATEGORY_SUCCESS:  
            return { ...state, ...INITIAL_STATE, product_categories: action.payload };
        case GET_PRODUCT_CATEGORY_FAIL:  
            return { ...state, error: 'Couldn\'t load category data.', loading: false };
        default: 
            return state;
    }
    };

// 3) ProductCategoryList.js

    

    class ProductCategoryList extends Component {
        componentWillMount() {
            this.props.getProductCategory();
        

        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = ds.cloneWithRows(this.props.product_categories);
    }

    componentDidMount() {

        console.log(this.props);

        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });

        this.dataSource = ds.cloneWithRows(this.props.product_categories);
        
    }

    renderRow(product_category) {
        return <ProductCategoryListItem item={product_category} />
    }

    render() {
        if(this.props.loading) {
            return (
                <Spinner size="small" />
            );
        }
        if(this.props.error) {
            return (
                <View style={styles.errorWrapperStyle}>
                    <Text style={styles.errorTextStyle}>{this.props.error}</Text>
                </View>
            );
        }
        return (
            <ListView
                dataSource={ this.dataSource }
                renderRow={ this.renderRow }
                enableEmptySections={ true }
            />
        );
    }
    }
    
    const styles = StyleSheet.create({
        errorTextStyle: {
            fontSize: 14,
            alignSelf: 'center',
            color: 'red'
        },
        errorWrapperStyle: {
            backgroundColor: '#999999',
            padding: 2
        }
    });

    const mapStateToProps = ({ productCategories }) => {    
        const { product_categories, error, loading } = productCategories;
        return { product_categories, error, loading }
    }
    
    export default connect(mapStateToProps, { getProductCategory })(ProductCategoryList);