일시적인 React Uncaught 오류 : 개체가 React 하위로 유효하지 않습니다.

Question

사용자가 로그인되었는지 여부에 따라 일부 링크를 렌더링하는 헤더 구성 요소가 있습니다.

이 구성 요소는 잘로드되고 로그인 및 가입 링크가 잘 표시됩니다. 이러한 링크를 클릭하면 저와 같은 기능을 수행하는 구성 요소로 이동합니다. 로그인하면 헤더가 변경되어 로그 아웃 링크가 표시됩니다.

그러나 로그 아웃 할 때 문제가 발생합니다. 로그인 및 가입 링크는 잘 표시되지만 더 이상 작동하지 않습니다. 여기에 비슷한 질문을 읽었습니다, 일반적으로 그들이 렌더링하려고 사람을 포함

bundle.js:4297 Uncaught TypeError: Cannot read property 'getHostNode' of null

:

Uncaught Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Signin .

이 링크를 클릭하면 다시 생성합니다 가입 링크를 클릭하면 다음과 같은 오류를 제공합니다 해당 속성 중 하나와 반대되는 개체. 그러나 이것은 여기에 해당하지 않습니다 - 또는 나는 무엇인가 놓치고 있습니까?

내 코드 :

헤더 :

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import {Link} from 'react-router'; 

class Header extends Component{ 
    renderLinks(){ 
     if(this.props.authenticated){ 
      return <li className="nav-item "> 
       <Link className="nav-link" to="/signout">Sign Out</Link> 
      </li> 
     }else{ 
      return [<li className="nav-item page-scroll" key={1}> 
         <Link className="nav-link page-scroll" to="/signin">Sign In</Link> 
        </li>, 
        <li className="nav-item" key={2}> 
         <Link className="nav-link page-scroll" to="/signup">Sign Up</Link> 
        </li> 
      ] 
     } 
    } 

    render() { 
     return (
      <div className="container-fluid header"> 
       <nav className="navbar navbar-toggleable-md navbar-inverse bg-inverse"> 
        <div className="navbar-nav"> 
          <Link to="/" className="navbar-brand"> 
            <img alt="Trellis" src="../../images/trellis.png" /> 
          </Link> 
          <ul className="nav navbar-nav"> 
           {this.renderLinks()} 
          </ul> 
         </div> 

       </nav> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state){ 
    return{ 
     authenticated: state.auth.authenticated 
    }; 
} 
export default connect(mapStateToProps)(Header); 

로그인 완료 구성 요소 :

import React, { Component } from 'react'; 
import { reduxForm, Field } from 'redux-form'; 
import * as actions from '../../actions'; 
import { connect } from 'react-redux'; 
import { Link } from 'react-router'; 

class Signin extends Component { 

    handleFormSubmit({ email, password }) { 
     this.props.signInUser({email, password}); 
    } 

    renderInput(field) { 
     if(!field.className) { field.className = "form-control" } 
     if(!field.type) { field.type = "text" } 

     return (
      <div> 
       <Field name={field.name} id={field.name} type={field.type} className={field.className} component="input" /> 
      </div> 
     ) 
    } 
    renderAlert(){ 
     if(this.props.errorMessage){ 
      return(
        <div className="alert alert-danger"> 
         <strong>Oops!</strong> {this.props.errorMessage} 
        </div> 
       ); 
    } 
} 

    render() { 
     const { handleSubmit } = this.props 

     return (
      <form className="sign-in" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}> 
       <fieldset className="form-group"> 
        <label>Email:</label> 
        {this.renderInput({ name: "email", type: "email" })} 
       </fieldset> 
       <fieldset className="form-group"> 
        <label>Password:</label> 
        {this.renderInput({ name: "password", type: "password" })} 
       </fieldset> 
       <div className="password-forgot"> 
        <Link to="/reset-password">I forgot my password</Link> 
       </div> 
       {this.renderAlert()} 
       <button action="submit" className="btn btn-primary">Sign in</button> 
      </form> 
     ) 
    } 
} 

function mapStateToProps(state){ 
    return{errorMessage: state.auth.error}; 
} 

Signin = connect(mapStateToProps, actions)(Signin) 

export default reduxForm({ 
    form: 'signin' 
})(Signin) 

Signout 구성 요소 :

import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import * as actions from '../../actions'; 

class Signout extends Component { 
    componentWillMount() { 
     this.props.signOutUser(); 
    } 
    render() { 
     return <div>Sorry to see you go!</div>; 
    } 
} 

export default connect(null, actions)(Signout); 

로그인 완료 조치 :

export function signInUser(props) { 
    const { email, password } = props; 
    return function(dispatch){ 
     axios.post(`${ROOT_URL}/signin`, {email, password}) 
      .then(response => { 
       localStorage.setItem('user', JSON.stringify(response.data)); 
       dispatch({ type: AUTH_USER }); 
       browserHistory.push('/dashboard'); 
     }) 
      .catch((err) => { 
       console.log(JSON.stringify('login error:', err)); 
       dispatch(authError(SIGNIN_FAILURE, 'Bad login credentials')); 
     }); 
    }; 
} 

Signout 액션 :

export function signOutUser() { 
    localStorage.clear(); 
    return { type: UNAUTH_USER }; 
} 

Answer 1

문제는 당신이의 일환으로 this.props.errorMessage를 반환 renderAlert() 함수를 호출 구성 요소를 렌더링 로그인 절차에 있었다

(원본 게시물에 코멘트 당으로서) JSX 요소. 이것은 SignIn에서 렌더링 한 JSX의 유일한 부분이었으며 (코드에 따라) 문제가 될 수있었습니다.

사실 this.props.errorMessage은 실제로 생각한 것처럼 문자열이 아니므로 개체를 React 하위로 간주하여 오류가 발생했습니다.