TypeError：render不是一个函数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 [email protected] [email protected] 

或

yarn add --exact [email protected] [email protected]