Question

Redux存储正在正确更新，但react组件prop却没有。我使用远程开发工具检查了redux全局状态，它正在按预期更新。
但是当我用react-devtools检查组件道具时，它没有更新。
如果我在更高阶的组件（例如索引）中调用getUserPublis（），则mapStateToProps会正确映射这些道具，但是当我创建新项目时，它不会被映射（但会正确更新到商店中）。
就像在更新状态更新时未调用 mapStateToProps（）

class Profile extends Component {

    static navigationOptions = ({navigation, screenProps}) => ({
        title: 'Perfil',
        headerRight: <HeaderButton navigation={navigation}/>,
    });

    componentDidMount(){
        getUserPublis(this.props.userData.ownPublis)
    }
    onPressCard = (publi) => {
        this.props.navigation.navigate('cardDescription', {
            data: publi,
            user: props.userName
        })
    }

    maybeRenderAddButton = () => {
        if (this.props.userData.isCommerce){
            return(
                <FloatingButton
                    icon="md-add"
                    color="white"
                    onPress={() => this.props.navigation.navigate('offerNew', {
                        title: "Crear anuncio"
                    })}
                />
            )
        } else {
            return console.log('no hay add button')
        }
    }

    render(){
        this.maybeRenderAddButton()
        if (this.props.publis.length === 0) {
            return(
                <Text> Loading </Text>
            )   
        }
        return (
            <ScrollView>
            {
                this.props.publis.map((publi, index) => {
                        return(
                            <CardGeneral
                                key={index}
                                onPressCard={() => onPressCard(publi)}
                                data={publi}
                                user={this.props.user.displayName}
                            />
                        )
                    }
                )
            }

            </ScrollView>


            );
    }

}

function mapStateToProps(state) {
    return {
        user: state.auth.user,
        userData: state.firestore.userData,
        publis: state.publis
    }
}

export default connect(mapStateToProps)(Profile)

减速器：

const initialState = []

function publis(state = initialState, action) {
    switch (action.type) {
        case 'FIRESTORE_PUBLI_SNAPSHOT': {
            return [
                ...state,
                action.payload.data
            ]
        }
        default:
            return state
    }
}

export default publis

Answer 1

好吧，终于我有了答案，这真是难以置信，因为我花了将近5天的时间解决了这个错误，并且您可以看到代码中没有明显的错误。
对于这个应用程序，我的堆栈是：react-native， expo ，react-navigation和redux。
问题显然是与expo有关，因为当我使用模拟器在开发模式下运行应用程序时，问题就存在了（当组件安装时，mapStateToProps仅被调用一次），，但是当我在android设备中运行该应用程序时，一切正常，但这只是我第一次运行...下次应用程序在android设备和ios模拟器中出现相同的问题。因此，我尝试在“博览会开发模式”下运行该应用程序，魔术般地一切正常。
这是一个问题，因为开发人员模式运行缓慢，我无法使用开发人员工具，但是很高兴知道真正的问题是什么。现在，我将其发布在博览会论坛上。
PD：我已经更新了expo并清除了expo缓存。

Answer 2

我在expo + react-navigation + redux + firebase上遇到了同样的错误，花了一周的时间寻找解决方案。 Redux状态已正确更新，在开发工具上可见，但组件属性没有变化。仅在首次渲染组件时更新属性。

就我而言，问题是通过将Expo的模式转换为生产模式来解决的。

Answer 3

export default connect(mapStateToProps,{getUserPublis})(Profile)

Answer 4

尝试一下，它应该可以工作

export default connect(mapStateToProps,null)(Profile)

为什么redux mapStateToProps即使商店已更新也不会更新组件道具？

4 个答案: