Question

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

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

但是问题是，数据无法加载。在调用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);

Answer 1

首先，您应该了解React Component life cycle。

您正在尝试从import java.util.*; public class MyClass { public static void main(String[] args) { Scanner input = new Scanner(System.in); System.out.print("Please enter a number range: "); int numOfCols = input.nextInt(); System.out.print("Please enter a number of rows: "); int numOfRows = input.nextInt(); for (int i = 1; i <=numOfRows; i++) { for (int j = 1; j <= numOfCols; j++){ for (int k = 1; k <= numOfCols; k++){ if (k == i) { System.out.print(k+j-1); } else { System.out.print(1); } } System.out.print(" "); } System.out.println(""); } } }中的api获取数据，但是在创建dataSource变量的componentWillMount生命周期遇到时，数据仍在获取。因此，您没有任何数据源。

删除componentDidMount函数并像这样更改render函数，以便每当获取componentDidMount时，都会生成dataSource。

product_categories

Answer 2

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

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

那时您进行数据更新时，可以在nextprops中访问这些数据

通过Redux在React Native上将数据从API加载到ListView

2 个答案: