Question

在Redux + iOS React Native中，更新的状态在父组件中正确记录，但是当在另一个方法中记录时，它只记录initialState。

我有以下调用操作的组件：

  _handleFirstName(text) {
    this.props.actions.updateFirstName(text)
  }

  _handleLastName(text) {
    this.props.actions.updateLastName(text)
  }

  <TextInput
    placeholder='Enter First Name'
    onChangeText={this._handleFirstName.bind(this)}
    value={this.props.userInfo.firstName}
  />

  <TextInput
    placeholder='Enter Last Name'
    onChangeText={this._handleLastName.bind(this)}
    value={this.props.userInfo.lastName}
  />

我的行为就像这样设置：

export function updateFirstName(text) {
  return {
    type: UPDATE_FIRST_NAME,
    firstName: text
  }
}

export function updateLastName(text) {
  return {
    type: UPDATE_LAST_NAME,
    lastName: text
  }
}

对于我的减速机：

const initialState = {
    newUser: false,
    active: false,
}

function userReducer(state = initialState, action) {
  switch(action.type) {
    case UPDATE_FIRST_NAME:
      return {
        ...state,
        firstName: action.firstName
      }

    case UPDATE_LAST_NAME:
      return {
        ...state,
        lastName: action.lastName
      }

     default:
       return state
  }
}

export default userReducer

状态正确更新属性并返回userInfo状态。但是当我控制台在另一个方法中记录更新的userInfo，而不是检索更新状态时，它只记录userInfo initialState：

const initialState = {
    newUser: false,
    active: false,
}

尝试记录它的方式如下：

  _logUserInfo() {
    console.log(this.props.userInfo)
  }

<TouchableHighlight onPress={this._logUserInfo.bind(this)}>
  <Text>Log User Info</Text>
</TouchableHighlight>

即使它正确地控制在父组件中记录更新状态，为什么在另一个方法中调用时只记录initialState而不是更新状态？

提前谢谢！

修改

状态是NavigationRootContainer.js：

中组件的连接方式

import { connect } from 'react-redux'
import NavigationRoot from '../Components/NavigationRoot'
import { updateFirstName, updateLastName, } from '../Actions/userActions'

function mapStateToProps(state) {
  return {
    userInfo: state.userReducer,
  }
}

export default connect(
  mapStateToProps,
  {
    updateFirstName: (value) => updateFirstName(value),
    updateLastName: (value) => updateLastName(value),
  }
)(NavigationRoot)

在index.ios.js：

import NavigationRootContainer from './src/Containers/NavigationRootContainer'


const userProject = () => (
  <Provider store={store}>
    <NavigationRootContainer/>
  </Provider>
)

使用NavigationRoot.js使用根组件<NavigationCardStack/>将道具传递下来：

  _renderScene (props) {
    return (
      <route.component{...route.passProps} actions={this.props}/>
    )
  }

    <NavigationCardStack
      direction='horizontal'
      navigationState={this.props.navigation}
      onNavigate={this._handleNavigate.bind(this)}
      renderScene={this._renderScene}
      renderOverlay={this.renderOverlay}
      style={styles.container}
    />

React Native：为什么还没有正确更新状态？

0 个答案: