TypeError: render не является функцией updateContextConsumer - PullRequest
Новая
       7

TypeError: render не является функцией updateContextConsumer

0 голосов
/ 04 февраля 2020

Я новичок в ReactJs и пытаюсь изучить ContextAPI, но у меня возникла эта ошибка. Я читаю заголовки об этой ситуации, но не могу найти решение. Сначала я попытался переустановить реакцию как старую версия, но она не изменилась. Я пытался обернуть приложение внутри приложения. js вместо индекса. js, но у меня был тот же результат, что и сейчас.

Приложение. 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>
        ) 
  }
}

Пользователь. 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();

это мои коды.

1 Ответ

2 голосов
/ 04 февраля 2020

Похоже, что вы экспортируете и импортируете контент в контексте. js файл неправильный. Вместо 

import UserProvider from './context.js';

попробуйте что-то вроде этого 

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

А как вы пытались обновить версию реакции? Вы используете приложение create-реагировать? если это так, вам придется обновить сценарии реакции. Для обновления до выбранной версии вы должны попробовать что-то вроде этого 

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

или 

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