Question

我是反应原生的新手，我正在尝试使用react-redux实现简单的注册功能。由于某些原因，将状态映射到连接中的props不起作用。

以下是我的代码：

SignUp.js （组件）

import React from 'react';
import { View, Text , TouchableOpacity , TextInput } from 'react-native'; 
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as signUpActions from "../actions/SignUpActions";

class SignUp extends React.Component {

  constructor(){
    super();
    this.state = {   
      name : '',
      password : '',
    };
  }

  saveUser(){
      let user = {};
      user.name = this.state.name;
      user.password = this.state.password;
      this.props.registerUser(user);
  }

  static navigationOptions = {
    title : 'Sign Up',
  };

  render(){
    return (
      <View>
        <TextInput 
          placeholder="Username" 
          onChangeText={(text) => this.setState({name : text})}
          />
         <TextInput 
            placeholder="Password" 
            onChangeText={(text) => this.setState({password : text})}
         />
         <TouchableOpacity onPress = {() => this.saveUser()} >
           <Text>DONE</Text>
         </TouchableOpacity>
      </View>                 
    ); 
  }
}    

export default connect(
  state => ({
      user : state.user
  }),
  dispatch => bindActionCreators(signUpActions, dispatch)
)(SignUp);

SignUpAction.js

function storeUser(user) {
    return {
        type : 'REGISTER_USER',
        payload : user,
    };
};

export function registerUser(user) {
    return function (dispatch, getState) {
        fetch(<the-url>)
            .then((response) => {return response.json()})
            .then((responseData) => dispatch(storeUser(responseData)))
            .catch((err) => console.log(err));
    };
};

SignUpReducer.js

const initialState = {
    data : {},
};

export default function signUpReducer(state = initialState, action) {

    console.log(action.payload) 
    //This gives {id:26 , name : "xyz" ,password:"pass"}

    switch (action.type) {
        case 'REGISTER_USER' :
            return {
                ...state , 
                user : action.payload
            }    
        default :         
            return state;
    }        
}

这是我的根减速机

export default function getRootReducer(navReducer) {
    return combineReducers({
        nav: navReducer,
        signUpReducer : signUpReducer,
    });
}

正在调用注册用户功能。并且还通过网络成功执行了获取请求。将其存储在数据库中后，它会返回相同的用户对象。它也会调度到storeUser函数。减速器也被调用。

但是，由于某些原因，状态未映射到连接内的道具。 this.props.user返回undefined。

我必须在这方面做错事，但我无法弄明白。基于我迄今为止看到的使用bindActionCreators调度任何动作时，reducer的结果需要使用connect映射到组件的props。如果错误请纠正我。

请帮我解决这个问题。

Answer 1

从您的商店定义，

signUpReducer

您为SignUp组件状态定义了密钥user。要访问此组件的状态，您应该使用此键，后跟状态名称。

访问export default connect( state => ({ user : state.signUpReducer.user })的正确方法是：

signUpReducer

//使用var games = ["game_1", "game_2","game_3"] var players= [{name:"steve"},{name:"sparrow"},{name:"captain"}] var incomingData= [{game_1:"basketball"},{game_2:"badminton"},{game_3:"pingpong"}] //change format as shown below: var reformat=[ {name:"steve",game:"basketball"},{name:"steve",game:"badminton"},{name:"steve",game:"pingpong"}] games.map((game,i)=>{ players[i].game= incomingData[i][game]; }) console.log(players) }密钥

Answer 2

对我来说，这也很起作用componentWillReceiveProps（nextProps）

componentWillReceiveProps(nextProps) {

 console.log();
 this.setState({propUser : nextProps.user})
}

将原生redux地图状态反映到不起作用的道具

2 个答案: