Question

所以这是我的app.js

import React from 'react'      
import {Header} from './common/header.component';
import {View} from './components/main';

export const {Provider, Consumer} = React.createContext('hello'); 

export class App extends React.Component {
    constructor(props) {       
        super(props);          
        this.state = {         
            auth: 'hello'      
        };                     
        this.authState = this.authState.bind(this);
    }
    authState(value){          
        console.log(value);    
        if(!value){
            return this.state.auth;
        } else if(typeof value === 'object'){
            this.setState(value);           
        }
    }

    render() {
        return (
            <div className="app">           
                <Header/>
                <Provider value={this.state.auth}>
                    <View updateAuth={this.authState}/>
                </Provider>
            </div>
        )
    }
}

这是我的登录组件

import {Consumer} from '../main.js';                                                                     

export class Signin extends React.Component {                                                            
    constructor(props) {                                                                                 
        super(props)                                                                                     
        this.state = {                                                                                   
            userUsername: '',                                                                            
            userPassword: ''                                                                             
        };                                                                                               
        console.log(this.props);                                                                         
        this.handleChange = this.handleChange.bind(this);                                                
        this.handleSubmit = this.handleSubmit.bind(this);                                                
    }                                                                                                    

    handleChange(e) {                                                                                    
        this.setState({                                                                                  
            [e.target.name]: e.target.value                                                              
        })                                                                                               
    }                                                                                                    

    handleSubmit(e) {                                                                                    
        e.preventDefault();                                                                              
        return signinApi({userUsername: this.state.userUsername, userPassword: this.state.userPassword}).then((data) => {
            console.log(data);                                                                           
            this.props.updateAuth({                                                                      
                auth: data.data.data                                                                     
            }); 
            this.props.history.push('/home')                                                             
        }).catch((err)=>{
            alert(err.message)                                                                           
        })  
    }   

    render() {                                                                                           
        return (                                                                                         
            <Consumer>                                                                                   
                {auth => auth ? (<Redirect to='/'/>) : (                                                 
                    <div>
                        <form onSubmit={this.handleSubmit}>                                              
                            <input type="text" value={this.state.userUsername} name="userUsername"       
                                onChange={this.handleChange}/>
                            <input type="password" value={this.state.userPassword} name="userPassword"   
                                onChange={this.handleChange}/>
                            <input type="submit"/>
                        </form>
                        <Link to="/signup">Signup</Link>                                                 
                    </div>
                )}  
            </Consumer>                                                                                  
        )   
    }   
}

所以，我在这里要做的是维护一个全局的auth状态，处理受保护的路由，如果已经记录，我想重定向到主页。

但是一旦我加载了signin组件，React就会抛出一个错误：Invalid type。我似乎无法弄明白，这里的问题是什么。

另外，我对上下文API的理解是否正确？

编辑：包含错误堆栈

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Signin`.
    in Signin (created by Route)
    in Route (created by View)
    in Switch (created by View)
    in View (created by App)
    in div (created by App)
    in App
    in Router (created by BrowserRouter)
    in BrowserRouter
vendor.js:1297:7

Answer 1

您安装了什么版本的react-dom？我有同样的错误并通过安装react-dom 16.3.0修复它，但我的错误是我使用Provider的地方。

React Context API，组件给出无效的类型错误

1 个答案: