javascript - 类型错误 : render is not a function updateContextConsumer

Question

我是 ReactJs 的新手，正在尝试学习 ContextAPI，但遇到了这个错误。我阅读了有关这种情况的标题，但无法找到解决方案。首先，我尝试将 React 重新安装为旧版本，但是它没有改变。我尝试将 App 包装在 app.js 而不是 index.js 中，但我得到了与现在相同的结果。

App.js

import React, { Component } from 'react'
import './App.css';
import UserFinding from './components/UserFinding';

class App extends Component {
render() {
return (
    <div>
        <UserFinding/>
    </div>
      )
  }
}
export default App;

UserFinding.js

import React, { Component } from 'react'
import User from './User.js'
import UserConsumer from '../context.js'

export default class UserFinding extends Component {
render(){
    return(
        <UserConsumer>
            {value=>{
                        const users=value;
                        return(
                            <div>
                                {
                                   users.map(user=>{
                                       return(
                                         <User key={user.id} id={user.id} userName= 
                                         {user.userName} department={user.department}/>
                                       )
                                   }
                                   ) 
                                }
                            </div>
                        )
                     }}
        </UserConsumer>
        ) 
  }
}

User.js

import React, { Component } from 'react'

export default class User extends Component {

state={
    isVisible:true
}
hideShowCard=()=>{
    this.setState({
        isVisible:!this.state.isVisible
    })
}
deleteOnUser=()=>{
    //Dispatch
}
render() {

    return (
            <div>
                <div className="row">
                <div className="col-sm-6">
                    <div className="card">
                        <div className="card-body">
                            <h5 className="card-title">{this.props.userName}<i onClick= 
           {this.deleteOnUser} className="fa fa-trash ml-2"></i></h5>
                            {this.state.isVisible ? <p className="card-text"> 
           {this.props.department}</p>:null}
                            <div onClick={this.hideShowCard} className="btn btn-primary"> 
           {this.state.isVisible ? "Hide" : "Show"}</div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

         )
        }
       }

context.js

import React,{Component} from 'react';
const UserContext=React.createContext();
export class UserProvider extends Component {
 state={
    users:[
      {
        id:1,
        userName:"Ufuk Oral",
        department:"Software Engineering"
      },
      {
        id:2,
        userName:"Emre Çorbacı",
        department:"Data Science"
      }
    ]
   }
 render(){
    return (
        <UserContext.Provider value={this.state}>
            {this.props.children}
        </UserContext.Provider>
    )
 }
}
const UserConsumer=UserContext.Consumer;
export default UserConsumer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import UserProvider from './context.js';
ReactDOM.render(
<UserProvider><App/></UserProvider>,document.getElementById('root')); 
serviceWorker.unregister();

这些是我的代码。

Answer 1

看来您导出和导入 context.js 文件中的内容是错误的。而不是

import UserProvider from './context.js';

尝试这样的事情

import {UserProvider} from './context.js';

您是如何尝试升级 React 版本的？你在使用 create-react-app 吗？如果是这样，您还必须更新 react 脚本。要升级到选定的版本，您必须尝试这样的操作

npm install --save --save-exact react@x.xx react-dom@x.xx 

或

yarn add --exact react@x.xx react-dom@x.xx