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

Question

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

我想在我的 home 组件上检测到 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

生产模式下的Expo解决了问题...

Answer 1

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

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

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

2. 另外请记住，这不会导致您的组件重新渲染。仅当组件的state 更改时，组件才会重新渲染。您可以在您的 props 中使用此更改来触发状态更改，这将再次调用 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});
       }
   }
   

希望这会有所帮助！

Answer 2

这听起来像是环境的错误。我在生产模式下启动了 Expo，它解决了问题。

在文件夹.expo

//setting.json

{
  "hostType": "lan",
  "lanType": "ip",
  "dev": false, // false for production env
  "minify": false,
  "urlRandomness": "53-g5j"
}

我希望它能有所帮助，但希望能够继续在开发模式下工作......

我在expo github上报告了一个错误

Answer 3

前面的答案是对的。但要使代码正常工作，请尝试以下方法。

class Home extends React.Component {
constructor(props) {
    super(props);
    this.state = {
      scrolling: false;
    }
}

makeScroll = (event) => {
  this.props.dispatch({ type: "POSITION", value: event.nativeEvent.contentOffset.y 
  });
  setTimeout(() => this.setState({scrolling: true}), 150);
}

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.makeScroll(event)}
                style={styles.flatListContainer} />
            <TopNavigation />
        </View>
    )
 }
}

export default connect(mapStateToProps)(Home)

而不是直接在 onScroll 事件中调度。将它传递给一个函数，并在调度后更改其中的本地状态。