时间戳

首页 > 解决方案 > 当使用 redux 在 react-native 上更改状态时，connect 不会刷新

react-native - 当使用 redux 在 react-native 上更改状态时，connect 不会刷新

问题描述

我已经解决了 5 个小时的问题，但它显然不想工作......

我想在我的主组件上检测到 onScroll 并在我的 TopNavigation 组件中接收状态“true”或“false”时调度事件

现在我的reducer运行良好（在渲染之前使用console.log（nextState））但我的印象是连接不适用于connect（mapStatetoProps）（TopNavigation），因为我的组件不会重新渲染

谢谢您的回答

//TopNavigation

import React from 'react'
import { connect } from 'react-redux'


class TopNavigation extends React.Component {
    constructor(props) {
        super(props)
    }


    componentDidMount() {
        console.log(this.props.scrollData)
    }
}

// Render things...

const mapStatetoProps = (state) => {
    return {
        scrollData: state.scrollData
    }
}

export default connect(mapStatetoProps)(TopNavigation)


// Home

import React from 'react'
import { StyleSheet, View, FlatList } from 'react-native'
import gStyles from '../../../Styles/global'
import { connect } from 'react-redux'

// Partials
import ItemBox from '../../Partials/ItemBox'
import TopNavigation from '../../Partials/TopNavigation'

// Data
import recetteData from '../../../api/recetteData'


class Home extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <View style={styles.mainContainer}>
                <FlatList
                    data={recetteData}
                    keyExtractor={(item) => item.id.toString()}
                    onPress={() => this._toggleSet()}
                    renderItem={({ item }) => <ItemBox item={item} />}
                    onScroll={(event) => this.props.dispatch({ type: "POSITION", value: event.nativeEvent.contentOffset.y })}
                    style={styles.flatListContainer} />
                <TopNavigation />
            </View>
        )
    }
}

export default connect(mapStateToProps)(Home)



//ScrollData Reducer

const initialState = {
    scrollData: {
        scrolled: false
    }
}

function scrollData(state = initialState, action) {
    let nextState
    switch (action.type) {
        case 'POSITION':
            if (action.value > 0) {
                nextState = {
                    ...state,
                    scrollData: {
                        ...state.scrollData,
                        scrolled: true,
                    },
                }
            }
            else {
                nextState = {
                    ...state,
                    scrollData: {
                        ...state.scrollData,
                        scrolled: false
                    },
                }
            }
            return nextState.scrollData.scrolled
        default:
            return state
    }
}

export default scrollData


//ConfigureStore

import { createStore } from 'redux';
import buttonPreference from './Reducers/buttonPreference'
import scrollData from './Reducers/scrollData'


export default createStore(/*buttonPreference,*/scrollData)

在控制台上（TopNavigation 的 componentDidMount 的console.log）：

对象{“滚动”：假，}

但是当我滚动时没有变化

这是我的 package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^32.0.6",
    "react": "^16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-32.0.1.tar.gz",
    "react-native-elevated-view": "0.0.6",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-paper": "^2.12.0",
    "react-native-responsive-dimensions": "^2.0.1",
    "react-navigation": "^2.0.1",
    "react-navigation-material-bottom-tabs": "^0.4.0",
    "react-redux": "^6.0.1",
    "redux": "^4.0.1"
  },
  "devDependencies": {
    "babel-preset-expo": "^5.0.0",
    "react-test-renderer": "^16.6.0-alpha.8af6728",
    "schedule": "^0.4.0"
  },
  "private": true
}

更新

装上TopNavigation：

//TopNavigation

    constructor(props) {
        super(props)
        this.state = {
            scrolledState: false
        }
    }

    componentDidUpdate(prevProps) { // Instead of componentDidMount
        if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
            console.log(this.props.scrollData);
            this.setState({ scrolledState: this.props.scrollData });
        }
    }

但它仍然不起作用，没有事件或状态改变......

更新 2

商店似乎工作正常，更确切地说是它没有实时更新组件。

如果我填充商店，我很平静并使用导航返回页面，数据已经很好地改变了。

真正的问题是，为什么组件没有随着reducer传递的新存储数据实时更新......

更新 3

生产模式的世博会解决了问题...

标签： react-nativereduxreact-reduxstateconnect

解决方案

在大多数情况下，您所做的一切都是正确的。问题出在你的TopNavigation文件上。这里要记住两件重要的事情：

  1. componentDidMount()仅在您的组件第一次渲染时调用一次。因此，即使您的connect工作正常，您也不会多次调用此函数。要检查你的 props 是否正确更新，你可以有一个console.log()内部componentDidUpdate()如下：

     componentDidUpdate(prevProps) {
     if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
         console.log(this.props.scrollData);
     }
 }

  2. 另请记住，这不会导致您的组件重新渲染。仅当state组件的 更改时，组件才会重新渲染。您可以在道具中使用此更改来触发状态更改，这将render再次调用该函数，以触发组件的重新渲染，如下所示：

    state = {scrolledState: false};

...
...

componentDidUpdate(prevProps) {
    if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
        // console.log(this.props.scrollData);
        this.setState({scrolledState: this.props.scrollData});
    }
}

希望这可以帮助！

推荐阅读