通过redux将数据从API加载到react native上的listview

我想使用RN创建一个简单的应用程序，它只是从API数据加载listview。 这个想法是：

我从操作中获取API，然后将其传递给有效负载上的reducer 在reducer上，我将数据传递到我的组件中 在我的组件上，我在componentWillMount上执行getData函数 然后，在加载后，我将使用此数据设置listView的数据源 但问题是，数据无法加载。它是在调用componentWillMount时加载的，但是我不知道如何更新我的组件，或者如何检测在componentWillMount中的getData完成任务后创建的新道具

这是我的代码片段 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);

---

道具更新后是否需要调用componentWillReceiveProps

componentWillReceiveProps(nextProps){
 this.loadPosts(nextProps)**HERE YOU CAN GET UPDATED PROPS**
},

---

当您当时更新数据时，您可以在nextprops中访问这些数据，您应该首先了解这些数据

您正试图从componentWillMount中的api获取数据，但当componentDidMount生命周期在您创建dataSource变量的地方满足时，数据仍在获取。所以你没有得到任何数据源

删除componentDidMount函数，并像这样更改渲染函数，这样无论何时获得产品类别，都会生成数据源

render() {
    let {loading, error, product_categories} = this.props;

    if(error) {
        return (
            <View style={styles.errorWrapperStyle}>
                <Text style={styles.errorTextStyle}>{error}</Text>
            </View>
        );
    }

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

        this.dataSource = ds.cloneWithRows(product_categories);

        return (
           <ListView
               dataSource={ this.dataSource }
               renderRow={ this.renderRow }
               enableEmptySections={ true }
           />
        );
    }
    return (
        <Spinner size="small" />
    );
}

---

您好，产品类别正在返回[对象对象]，[对象对象]，。。。而且它不会进入IFU产品类别&！加载部件。我通过删除产品类别来修复它，只需使用！加载如果only@baycisk伟大的