Question

使用Redux的React Native应用程序出现问题，我一直在努力找出原因。

当组件A中的分派更改Redux状态时，组件B不会显示Redux状态的最新值。例如，假设我单击组件A中的按钮以将Redux值从0更改为1，它将在组件B中显示0，但是当我单击按钮以将其添加1使其变为2时，组件B将显示1。是我的代码的示例。当我单击组件A中的TouchableOpacity时，应将this.props.screen从1（初始状态）更改为0。在组件B中，我有this.props.screen的常规console.log和一个控制台。在setTimeout内记录50毫秒。在控制台内部，setTimeout中的console.log在命中时具有正确的值0，但是在其外部仍然显示1。类似地，在组件B中呈现的文本也将显示1。如果再次单击该按钮，它将显示0。

我从代码中包含了相关的动作和缩减器。起初，我认为这可能是一个突变，但似乎只能在对象和数组上发生（我只使用数字）。我希望能帮助您弄清楚如何使组件B中呈现的文本反映最新的值。预先感谢！

组件A

    import { connect } from "react-redux";
    import { setScreen } from "../redux/Actions";

    class Header extends Component {


      componentWillReceiveProps(nextProps){
        setTimeout(() => { this.logoHide() },10);
        this.props.scrollLocation < 10 ? this.changeTransparency(0) : this.changeTransparency(.9);
      }

      setScreen(screen){
        this.props.setScreen(screen);
      }

      render() {

        var {height, width} = Dimensions.get('window');

        return (
          <View>    
              <TouchableOpacity onPress={() => this.setScreen(0)}>
                <Text>Click Me</Text>
              </TouchableOpacity>
          </View>
        );
      }
    }
const mapStateToProps = state => {
  return {
    height: state.height,
    platform: state.platform,
    screen: state.screen,
    scrollLocation: state.scrollLocation
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setScreen: (value) => dispatch(setScreen(value))
  };
};

export default connect(mapStateToProps,mapDispatchToProps)(Header);

Redux动作

import { SET_SCREEN } from './Constants';
    export const setScreenDispatcher = (value) => ({ type: SET_SCREEN, screen: value});
    export const setScreen = (value) => {
        return (dispatch) => {
            dispatch(setScreenDispatcher(value));
        }
    }

Redux Reducer

import { combineReducers } from 'redux';
import { SET_SCREEN } from "./Constants";

const initialState = []

const screen = (state = 1, action) => {
  switch (action.type) {
    case SET_SCREEN:
      return action.screen;
    default:
      return state;
  }
};

// COMBINE REDUCERS //
export default combineReducers({
  screen
});

组件B

import { connect } from "react-redux";

class VisibleMenus extends Component {

componentWillUpdate(){
    console.log(this.props.screen);
    setTimeout(() => {console.log(this.props.screen)},50);
    }
  }
 render() {

    return (
      <View>
    <Text>{this.props.screen}</Text>
 </View>
    );
  }
}
const mapStateToProps = state => {
  return {
    screen: state.screen
  };
};

const mapDispatchToProps = dispatch => {
  return {

  };
};

export default connect(mapStateToProps,mapDispatchToProps)(VisibleMenus);

App.js

import React, {Component} from 'react';

import { Provider } from "react-redux";

import VisibleMenus from './VisibleMenus';

import { Store } from "./redux/Store";

const store = Store();

export default class App extends Component {

  render() {

    return (

      <Provider store={store}>

        <VisibleMenus />

      </Provider>

    );

  }

}

Store.js

// REDUX STORE //

import { createStore, applyMiddleware } from "redux";

import rootReducer from "./Reducers";

import ReduxThunk from 'redux-thunk'



export const Store = (initialState) => {

    return createStore(

    rootReducer,

        initialState,

        applyMiddleware(ReduxThunk)

    );

}

Answer 1

对于遇到此问题的任何人，我都认为我会分享解决方法。

我研究了突变，但我绝对不是在改变状态，但是当Redux存储更改时，我的组件不会更新。

我尝试同时使用componentWillUpdate（）和componentWillReceiveProps（），但是两者都没有改变。但是，我正在this.props.screen和this.state.screen之间进行比较，这最终成为我的问题。

我应该一直与componentWillReceiveProps（nextProps）内部的nextProps.screen和this.state.screen进行比较，最终修复了所有问题。

我要感谢Hashith的帮助。

React组件未获取最新的Redux状态值

1 个答案: