react-native - 更改名称后道具的价值未定义，但她在那里

问题描述

我正在尝试在我的 react native 应用程序中实现 redux。
一切正常，但是当我更改数组的名称时，应用程序无法呈现列表。

在类 App 扩展组件中，我有：

placeAddedHandler = placeName => {
    this.props.onAddPlace(placeName);
};

render() {
    return (
        <View style={styles.container}>
            <PlaceDetail
                selectedPlace={this.props.selectedPlace}
                onItemDeleted={this.placeDeletedHandler}
                onModalClosed={this.modalClosedHandler}
            />
            <PlaceInput
                onPlaceAdded={this.placeAddedHandler} />
            <PlaceList
                places={this.props.places}
                onItemSelected={this.placeSelectedHandler}
            />
        </View>
    );
}

在地方Red.js

const initialState = {
    places: [],
    selectedPlace: null
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_PLACE:
            return {
                ...state,
                places: state.places.concat({
                    key: Math.random(),
                    name: action.placeName,
                    image: {
                        uri:
                            "https://www.randomImage.jpg"
                    }
                })
            };

现在，如果我将地点从初始状态更改为地点列表，应用程序将无法呈现。
在调试器中，我们可以在 Placelist.js 中看到：

const placeList = props => {
    return (
        <FlatList
            style={styles.listContainer}
            data={props.places}
            renderItem={(info) => (
                <ListItem
                    placeName={info.item.name}
                    placeImage={info.item.image}
                    onItemPressed={() => props.onItemSelected(info.item.key)}
                />
            )}
        />
    );
};

data={props.places} -> 这里 props 也有我的价值和地点，但名称不同：props.placesList 我在 props 中仍然有价值，但 placesList 是“未定义”

当然，我在我的应用程序的任何地方都将名称地点更改为地点列表

有什么问题？如何解决？如果您想从我的应用程序中获取更多代码，请告诉我。

更改后：

PlaceList.js

const placeList = props => {
    return (
        <FlatList
            style={styles.listContainer}
            data={props.placesList}
            renderItem={(info) => (
                <ListItem
                    placeName={info.item.name}
                    placeImage={info.item.image}
                    onItemPressed={() => props.onItemSelected(info.item.key)}
                />
            )}
        />
    );
};

地方Red.js

const initialState = {
    placesList: [],
    selectedPlace: null
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_PLACE:
            return {
                ...state,
                placesList: state.placesList.concat({
                    key: Math.random(),
                    name: action.placeName,
                    image: {
                        uri:
                            "https://www.randomImage.jpg"
                    }
                })
            };

应用程序.js

    render() {
        return (
            <View style={styles.container}>
                <PlaceDetail
                    selectedPlace={this.props.selectedPlace}
                    onItemDeleted={this.placeDeletedHandler}
                    onModalClosed={this.modalClosedHandler}
                />
                <PlaceInput
                    onPlaceAdded={this.placeAddedHandler} />
                <PlaceList
                    places={this.props.placesList}
                    onItemSelected={this.placeSelectedHandler}
                />
            </View>
        );
    }
}

data={props.placesList} -> 这个道具有我的价值，但 placesList 是未定义的

标签： react-nativeredux

react-native - 更改名称后道具的价值未定义，但她在那里

问题描述

解决方案

推荐阅读