Пытаюсь создать приложение на Reactjs. В AuthContext.Consumer я получаю authContext как undefined.

Пытался зарегистрировать authContext в потреблении, и он отображается как неопределенный. Почему провайдер не передает контекст потребителю?

Что я делаю не так?

import AuthContext from '../context/auth-context'
 
class App extends Component {
state = {
    persons: [
      {name: "John Doe", age: 20},
      {name: "Neal W", age: 21}
    ],
    isAuthenticated: false
}
// Provider:
 render() {    
    return(
        <AuthContext.Provider 
          value={{
              isAuthenticated: this.state.isAuthenticated, 
              login: this.loginClickHandler
          }}
        >
          <div>
          
            <Person 
              name={this.state.persons[0].name} 
              age={this.state.persons[0].age} 
              initname={true} 
              key={this.state.persons[0].id}
              changed={this.nameChangedHandler} 
              deleted={this.deletePersonHandler} 
            />
          </div>
        </AuthContext.Provider>
    );
  }
}
}
//Consumer
 
import React, { Component, useContext } from 'react';
import './Person.css';
import AuthContext from '../../../context/auth-context'
 
class Person extends Component {
    render() {
        return(
            <AuthContext.Consumer>
                    { 
                        (authContext) => {                                            
                            return (
                                <button className="btn btn-light btn-lg">{authContext.isAuthenticated ? "Logout" : "Login" }</button>
                            );
                        }
                    }
            </AuthContext.Consumer>   
        )
    }
};
export default Person;
1
Maneesh R 16 Фев 2021 в 18:54

1 ответ

Лучший ответ

Чтобы добавить к комментарию Арона, я приложил небольшой фрагмент кода, в котором console.log отображается для отображения authContext при нажатии кнопки входа в систему.

Похоже, что consumer здесь работает правильно, и проблема значения undefined для authContext может быть результатом того, что компонент consumer не является дочерним компонентом компонент provider.

Без дополнительной информации о context и структуре приложения трудно сказать, что именно вызывает проблему, но вы можете дважды проверить, что компонент AuthContext.Consumer в компоненте Person является дочерним по отношению к компоненту AuthContext.Provider.

const AuthContext = React.createContext();
 
class App extends React.Component {
state = {
    persons: [
      {name: "John Doe", age: 20},
      {name: "Neal W", age: 21}
    ],
    isAuthenticated: false
}
// Provider:
 render() {    
    return(
        <AuthContext.Provider 
          value={{
              isAuthenticated: this.state.isAuthenticated, 
              login: this.loginClickHandler
          }}
        >
          <div>
          
            <Person 
              name={this.state.persons[0].name} 
              age={this.state.persons[0].age} 
              initname={true} 
              key={this.state.persons[0].id}
              changed={this.nameChangedHandler} 
              deleted={this.deletePersonHandler} 
            />
          </div>
        </AuthContext.Provider>
    );
  }
}


//Consumer
class Person extends React.Component {
  render() {
    return(
      <AuthContext.Consumer>
      {(authContext) => {                                            
        return (
          <button onClick={() => console.log(authContext)}>
            {authContext.isAuthenticated ? "Logout" : "Login" }
          </button>
        );
      }}
      </AuthContext.Consumer>   
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>
1
ppak10 16 Фев 2021 в 16:51