Question

已经有5个小时了，但是我确定它不想工作...

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

目前，我的reducer运行良好（在渲染之前使用console.log（nextState）），但我的印象是该连接不适用于connect（mapStatetoProps）（TopNavigation），因为我的组件无法重新渲染< / p>

谢谢您的回答

//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）：

对象{ “滚动”：false， }

但是在滚动时没有变化

这是我的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

商店似乎在工作或正常运行，更准确的问题是它不能实时更新组件。

如果我填充了商店，我会很高兴，然后使用导航返回到页面，则数据已经很好地更改了。

真正的问题是，为什么组件不会使用化简器传递的新商店数据实时更新...

更新3

博览会在生产模式下解决了问题...

Answer 1

在大多数情况下，您已经做好了所有事情。问题出在您的TopNavigation文件上。这里要记住两件重要的事情：

componentDidMount()仅被称为一次。因此，即使您的connect正常工作，您对该函数的调用也不会超过一个。要检查道具是否正确更新，可以在console.log()内放置一个componentDidUpdate()，如下所示：
```
 componentDidUpdate(prevProps) {
     if (this.props.scrollData.scrolled !== prevProps.scrollData.scrolled) {
         console.log(this.props.scrollData);
     }
 }
```

还请记住，这不会导致组件的重新渲染。仅当组件的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});
    }
}

希望这会有所帮助！

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事件上调度。将其传递给函数并在分派后更改其中的本地状态。

当使用redux对react-native进行状态更改时，connect不会刷新

3 个答案: