TypeError:无法读取未定义的React Native Redux的属性'map'

卡康

我尝试按照与git repos一起使用的示例相同的逻辑创建一个reducer

这里说减速器:

/**
 * Created by kenji on 3/9/18.
 */
/**
 * /stock?search=String
 * Searches Stock table, checking for given search value
 * and returns an array that contains that value
 * @action GET
 * @returns [array]
 * @type {string}
 */
export const GET_STOCK_LIST = 'ReduxStarter/stock_list/LOAD';
export const GET_STOCK_LIST_SUCCESS = 'ReduxStarter/stock_list/LOAD_SUCCESS';
export const GET_STOCK_LIST_FAIL = 'ReduxStarter/stock_list/LOAD_FAILURE';

/**
 * /stock/${id}
 * Gets an ID passed to it and returns an object if it exists
 * @action GET
 * @returns {object}
 * @type {string}
 */
export const GET_STOCK = 'ReduxStarter/stock/LOAD';
export const GET_STOCK_SUCCESS = 'ReduxStarter/stock/LOAD_SUCCESS';
export const GET_STOCK_FAIL = 'ReduxStarter/stock/LOAD_FAIL';

/**
 * /stock/${id}
 * Updates Stock by passing an object with new variables to update with
 * @action PUT
 * @returns {null}
 * @type {string}
 */
export const PUT_STOCK = 'ReduxStarter/stock/CHANGE';
export const PUT_STOCK_SUCCESS = 'ReduxStarter/stock/CHANGE_SUCCESS';
export const PUT_STOCK_FAIL = 'ReduxStarter/stock/CHANGE_FAIL';

/**
 * /stock/${id}/barcodes
 * Gets the barcodes of an a stock item if the ID is valid
 * @action: GET
 * @returns [array]
 * @type {string}
 */
export const GET_BARCODES = 'ReduxStarter/stock/barcodes/LOAD';
export const GET_BARCODES_SUCCESS = 'ReduxStarter/stock/barcodes/LOAD_SUCCESS';
export const GET_BARCODES_FAIL = 'ReduxStarter/stock/barcodes/LOAD_FAIL';

/**
 * /stock/barcode/${barcode}
 * Gets a stock item from the supplied barcode
 * @action: GET
 * @returns [array]
 * @type {string}
 */
export const GET_STOCK_FROM_BARCODE = 'ReduxStarter/stock/barcode/LOAD';
export const GET_STOCK_FROM_BARCODE_SUCCESS = 'ReduxStarter/stock/barcode/LOAD_SUCCESS';
export const GET_STOCK_FROM_BARCODE_FAIL = 'ReduxStarter/stock/barcode/LOAD_FAIL';

const initialState = {
    stockList: [],
    stock: {},
    result: {},
    barcodeList: [],
    stockFromBarcode: {},
};

export default function reducer(state = initialState, action) {
    switch(action.type) {
        case GET_STOCK_LIST:
            return { ...state, loadingStockList: true };
        case GET_STOCK_LIST_SUCCESS:
            return { ...state, loadingStockList: false, stockList: action.payload.data };
        case GET_STOCK_LIST_FAIL:
            return { ...state, loadingStockList: false, stockListError: 'Failed to retrieve stock list' };
        case GET_STOCK:
            return { ...state, loadingStock: true };
        case GET_STOCK_SUCCESS:
            return { ...state, loadingStock: false, stock: action.payload.data };
        case GET_STOCK_FAIL:
            return { ...state, loadingStock: false, stockError: 'Failed to retrieve stock list' };
        case PUT_STOCK:
            return { ...state, loadingStockUpdate: true };
        case PUT_STOCK_SUCCESS:
            return { ...state, loadingStockUpdate: false, result: action.payload.data };
        case PUT_STOCK_FAIL:
            return { ...state, loadingStockUpdate: false, stockUpdateError: 'Failed to update stock list' };
        case GET_BARCODES:
            return { ...state, loadingBarcodes: true };
        case GET_BARCODES_SUCCESS:
            return { ...state, loadingBarcodes: false, barcodeList: action.payload.data };
        case GET_BARCODES_FAIL:
            return { ...state, loadingBarcodes:false, barcodesError: 'Failed to load barcodes' };
        case GET_STOCK_FROM_BARCODE:
            return { ...state, loadingStockFromBarcode: true };
        case GET_STOCK_FROM_BARCODE_SUCCESS:
            return { ...state, loadingStockFromBarcode: false, stockFromBarcode: action.payload.data };
        case GET_STOCK_FROM_BARCODE_FAIL:
            return { ...state, loadingStockFromBarcode: false, stockFromBarcodeError: 'Failed to get stock item from barcode' };
        default:
            return state;
    }
}

export function listStockArray(searchQuery, pageSize = 50, pageNumber = 1) {
    return {
        type: GET_STOCK_LIST,
        payload: {
            request: {
                url: `/stock?search=${searchQuery}&pageSize=${pageSize}&pageNumber=${pageNumber}`
            }
        }
    };
}

export function listStockItem(stockID) {
    return {
        type: GET_STOCK_LIST,
        payload: {
            request: {
                url: `/stock/${stockID}`
            }
        }
    };
}

export function updateStock(stockID, data) {
    return {
        type: GET_STOCK_LIST,
        payload: {
            request: {
                url: `/stock/${stockID}`,
                method: `PUT`,
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                data: data,
            }
        }
    };
}

export function listStockBarcodes(stockID) {
    return {
        type: GET_BARCODES,
        payload: {
            request: {
                url: `/stock/${stockID}/barcodes`
            }
        }
    };
}

export function listStockFromBarcode(barcode) {
    return {
        type: GET_BARCODES,
        payload: {
            request: {
                url: `/stock/barcode/${barcode}`
            }
        }
    };
}

现在,我得到标题中提到的错误:** TypeError:无法读取未定义的属性'map'**

这是减速器对应用程序的暗示:

import reducers from './redux/reducers/lots_reducer';
import StockList from './components/StockList';

const client = axios.create({
    baseURL: 'https://api.github.com',
    responseType: 'json'
});

const store = createStore(reducers, applyMiddleware(axiosMiddleware(client)));

const Stack = createStackNavigator({
    StockList: {
        screen: StockList
    },
});

export default class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <View style={styles.container}>
                    <Stack/>
                </View>
            </Provider>
        );
    }
}

最后是实际组件:

import { connect } from 'react-redux';

import { listStockArray } from '../redux/reducers/lots_reducer';

class StockList extends Component {

    componentDidMount() {
        this.props.listStockArray('panadol');
    }

    renderItem = ({ stockList }) => (
        <TouchableOpacity
            style={styles.item}
            onPress={() => this.props.navigation.navigate(`Detail`, { name: stockList.StockID })}
        >
            <Text>{stockList.TradeName}</Text>
        </TouchableOpacity>
    );

    render() {
        const { stockList } = this.props;
        return (
            <FlatList
                styles={styles.container}
                data={stockList}
                renderItem={this.renderItem}
            />
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    item: {
        padding: 16,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc'
    }
});

const mapStateToProps = state => {
    let storedRepositories = state.repos.map(repo => ({ key: (repo.id).toString(), ...repo }));
    return {
        repos: storedRepositories
    };
};

const mapDispatchToProps = {
    listStockArray
};

export default connect(mapStateToProps, mapDispatchToProps)(StockList);

抱歉,转储了大量代码,所有代码都与之相关,我认为该错误存在于具有未定义initialState的地方,但我看不到我错过的定义

Xadm

这段代码

const mapStateToProps = state => {
    let storedRepositories = state.repos.map(repo => ({ key: (repo.id).toString(), ...repo }));
    return {
        repos: storedRepositories
    };
};

表示您要使用map函数转换(更改idkey属性)state.repos并repos使用中间变量作为返回storedRepositories这些部分看起来像原始的,与回购示例相同。

出现错误,因为状态不包含repos数组。您还有其他一些状态数组(reducer中的initialState),但是它们都不是repos

在reducer中,您将有效负载(获取的数据)存储在存储数组中,例如

    case GET_STOCK_LIST_SUCCESS:
        return { ...state, loadingStockList: false, stockList: action.payload.data };

将数据存储在中stockList对于其他成功操作,您具有其他数组名称。

组件不必使用所有存储数据,您只能使用它感兴趣的部分-这是mapStateToProps映射的原因您可以简单地

const mapStateToProps = state => {
    return {
        stockList: state.stockList, 
        stock: state.stock
    };
};

这些值将作为this.props.stockListthis.props.stock

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

TypeError:无法读取未定义的React Native的属性'map'

TypeError:无法读取React Native中未定义的属性'map

React Native + Fetch => TypeError:无法读取未定义的属性“then”

TypeError:无法读取未定义的React Hooks的属性“ map”

React Jest:TypeError:无法读取未定义的属性“ map”

无法读取未定义的属性'map'-react,redux

无法读取 react/redux 中未定义的属性“map”

TypeError:无法读取react-redux中未定义的属性'map'

React-Redux 搜索栏错误 דTypeError:无法读取未定义的属性‘map’”

React-Redux TypeError:无法读取未定义的属性“map”

React-Redux 程序返回“TypeError:无法读取未定义的属性‘map’”

TypeError:无法读取未定义的属性“ map”

反应TypeError:无法读取未定义的属性'map'

ReactJS:TypeError:无法读取未定义的属性“ map”

TypeError:无法使用ReactJs读取未定义的属性“ map”

无法读取未定义的TypeError属性“ map”

TypeError:无法读取reactjs中未定义的属性'map'

TypeError:无法读取未定义的Reactjs的属性“ map”

TypeError:无法读取未定义<Angular 8>的属性'map'

ReactJs-TypeError:无法读取未定义的属性“ map”

TypeError:无法读取未定义的Reactjs的属性“ map”?

Egghead.io Redux教程-课程17:“ TypeError:无法读取未定义的属性'map'

TypeError:无法在React Native中读取未定义的属性'receiptnumber'

TypeError:无法读取未定义的 React Native 上下文的属性“提供者”

React-Native AsyncStorage:TypeError:无法读取未定义的属性“ setItem”

TypeError:无法读取未定义[react-native-payments]的属性“ show”

React Native 测试失败:“TypeError:无法读取未定义的属性‘fs’”

React Native-TypeError:无法读取未定义的属性“ clean”

如何避免TypeError:无法读取React Native中未定义的属性“ picture”?