reactjs - 使用redux state和axios，对象作为React子无效

问题描述

我收到了来自后端应用程序的响应，该响应在动作触发后设置为 redux 状态。一切都很顺利，直到我想动态显示响应状态。尝试在 {} 中呈现它时，我收到此问题标题中所述的错误。

我知道有很多类似的主题，但我不明白我在哪里收集了孩子，当我只获得响应状态时。

authActions.js

import axios from 'axios';

import { LOGIN_USER, REGISTER_USER, LOGOUT_USER } from './types';

export const loginUser = user => dispatch => {
 axios.post('https://damianlibrary.herokuapp.com/users/login', user)
 .then(res => dispatch({
  type: LOGIN_USER,
  payload: localStorage.setItem('usertoken', res.data),
 }))
}

export const registerUser = user => dispatch => {
 axios.post('https://damianlibrary.herokuapp.com/users/register', user)
 .then(res => dispatch({
  type: REGISTER_USER,
  payload: res.data,
 }))
}

export const logoutUser = () => dispatch => {
 dispatch({
  type: LOGOUT_USER,
  payload: localStorage.removeItem('usertoken')
 })
}

authRedcuer.js

import { LOGIN_USER, REGISTER_USER, LOGOUT_USER } from '../actions/types';

let authState = {
 users: [],
 token: null,
 response: ''
}

export default function(state = authState, action) {
 switch(action.type) {
  case LOGIN_USER:
   return {
    ...state,
    token: action.payload,
  };
 case REGISTER_USER:
  return {
    ...state, 
    response: action.payload
  };
 case LOGOUT_USER:
  return {
    ...state,
    token: action.payload
  }
 default:
  return state;
 }
}

RegisterForm.js

import React, { Component } from 'react';

import { connect } from 'react-redux';
import { registerUser } from '../../actions/authActions';

import './RegisterForm.css';

class RegisterForm extends Component {

 state = {
  user_name: '',
  password: '',
  first_name: '',
  last_name: '',
  email: '',
  errorMessage: ''
 }


 onChangeHandler = (e) => {
  this.setState({ [e.target.name]: e.target.value })
 };

onSubmitHandler = (e) => {
const { user_name, password, first_name, last_name, email } = this.state

const response = this.props.user.response
if(user_name && password && first_name && last_name && email) {
  if(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)) {
      const newUser = {
      user_name: user_name,
      password: password,
      first_name: first_name,
      last_name: last_name,
      email: email
    }

    this.props.registerUser(newUser);

    this.setState({
      user_name: '',
      password: '',
      first_name: '',
      last_name: '',
      email: '',
      errorMessage: ''
    }, () => {
      console.log(this.props.user)
    })
} else {
  this.setState({ errorMessage: 'Please enter correct email adress' })
}
} else { 
 this.setState({ errorMessage: 'Please fill in all fields' })
} 
e.preventDefault();
}

render() {
 const { user_name, password, first_name, last_name, email } = this.state;


return (
  <div className='formContainer'>
    <div className='errorBox'>
      <p>{this.state.errorMessage}</p>
    </div>
    {response && <div className='errorBox'>
    <p>{response}</p>
    </div>}
    <div className='form'>
      <form className='bookForm' onSubmit={this.onSubmitHandler.bind(this)}>
        <div className='inputs'>
          <input 
          type='text' 
          name='user_name'  
          placeholder='Username'
          onChange={this.onChangeHandler}
          value={user_name}/>
          <input 
          type='password' 
          name='password'  
          placeholder='Password'
          onChange={this.onChangeHandler}
          value={password}/>
          <input 
          type='text' 
          name='first_name'  
          placeholder='First name'
          onChange={this.onChangeHandler}
          value={first_name}/>
          <input 
          type='text' 
          name='last_name'  
          placeholder='Last Name'
          onChange={this.onChangeHandler}
          value={last_name}/>
          <input 
          type='text' 
          name='email'  
          placeholder='Email'
          onChange={this.onChangeHandler}
          value={email}/>            
        </div>
        <div className='buttonSpace'>
          <button>Register</button>
        </div>
      </form>
    </div>
  </div>
  )
 }
}

const mapStateToProps = (state) => ({
 user: state.auth
});

export default connect(mapStateToProps, { registerUser })(RegisterForm);

标签： reactjsreduxrendering

reactjs - 使用redux state和axios，对象作为React子无效

问题描述

解决方案

推荐阅读