間歇性的React Uncaught錯誤：對象無效作為React子級

Question

我有一個Header組件，它根據用戶是否登錄來呈現一些鏈接。

該組件加載正常，顯示登錄和注冊鏈接正常。 單擊這些鏈接會將我帶到這些組件，它們將發揮應有的作用。 登錄后，標題將更改為顯示注銷鏈接。

但是，當我退出時，情況會出錯。 登錄和注冊鏈接顯示正常，但是它們不再起作用。 單擊注冊鏈接會出現以下錯誤：

未捕獲的錯誤：對象作為React子對象無效（找到：帶有鍵{}的對象）。 如果您打算渲染孩子的集合，請改用數組或使用React附加組件中的createFragment（object）包裝對象。 檢查Signin的渲染方法。

再次單擊鏈接將產生以下結果：

bundle.js：4297未捕獲的TypeError：無法讀取null的屬性'getHostNode'

我在這里讀過類似的問題，通常它們涉及試圖渲染對象而不是其屬性之一的人。 但是，這里不是這種情況-還是我錯過了什么？

我的代碼：

標題：

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)

退出組件：

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

登出動作：

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

Answer 1

（根據對原始帖子的評論）

問題出在SignIn渲染組件中，您調用renderAlert()函數，該函數將this.props.errorMessage作為JSX元素的一部分返回。 這是SignIn呈現的JSX的唯一部分，可能會成為問題（根據您的代碼）。

原來this.props.errorMessage實際上是一個對象，而不是您所想的字符串，因此將對象視為React子對象時出錯。