Объекты недопустимы как дочерние элементы React, используя избыточное состояние и аксиосы - PullRequest
Новая
       10

Объекты недопустимы как дочерние элементы React, используя избыточное состояние и аксиосы

0 голосов
/ 26 декабря 2018

Я получил ответ от моего бэкэнда, который настроен на состояние избыточности после запуска действия.Все работает гладко, пока я не хочу динамически отображать статус ответа.При попытке отобразить его в {} я получаю сообщение об ошибке, указанное в заголовке этого номера.

Я знаю, что есть много похожих тем, но я не понимаю, где у меня есть коллекция детей, когда я нахожусьполучение только статуса в качестве ответа.

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);

Ответы [ 3 ]

0 голосов
/ 26 декабря 2018

Вероятно, проблема здесь: 

const mapStateToProps = (state) => ({
    user: state.auth.user //Need to change this line like this.
});

Вы получаете полное состояние аутентификации вместо пользовательского объекта.

0 голосов
/ 26 декабря 2018

Ключом к успеху было изменение <p>{response}</p> на <p>{response.status}</p> в 68 строке моего RegisterForm.js файла.

Ответ был простым объектом, поэтому мне просто нужно былопередать значение статуса в мой errorBox div.

0 голосов
/ 26 декабря 2018

Если у вас возникла вышеупомянутая ошибка при попытке отрисовки response, причина в том, что response является объектом, а JSX не может отрисовать объект, он может рендерить html-теги или другие компоненты.Вам нужно превратить ваш объект в несколько HTML-тегов

...