Невозможность получить данные поставщика из React.Context API

Я пытаюсь изучить api контекста для реакции, но я думаю, что меня смущают некоторые его принципы. Шутки, за которыми я слежу, никогда не работают. Я использую правильную версию React.

Context.js

import React, { Component } from "react";

const MyContext = React.createContext();

export default class MyProvider extends Component {
  state = {
    userName: 'Kelly'
  };

  render() {
    return(
      <MyContext.Provider context = {{
        value: this.state.value
      }}>{this.props.children}</MyContext.Provider>
    );
  }
}

App.jsx

import React from 'react';
import MyProvider from '../Context';

const App = () => {
  return(
    <MyProvider>
      <MyContext.Consumer>
        {context => (
          <p>{context}</p>
        )}
      </MyContext.Consumer>
      </MyProvider>
  );
}

export default App;

reactjs

04.06.2018 06:26

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

504

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

const MyContext = React.createContext();

class MyProvider extends React.Component {
  state = {
    userName: 'Kelly'
  };

  render() {
    return(
      <MyContext.Provider value = {this.state.userName}>                           
           {this.props.children}
      </MyContext.Provider>
    );
  }
}

class App extends React.Component {
  render() {
    return(
    <MyProvider>
      <MyContext.Consumer>
        {context => (
          <p>{context}</p>
        )}
      </MyContext.Consumer>
    </MyProvider>
  );  
  }

}
ReactDOM.render(<App />, document.getElementById("root"))

Надеюсь это поможет !!

Выдает ту же ошибку, что и раньше: «Uncaught ReferenceError: MyContext is not defined». Я импортирую MyProvider в компонент, которому он нужен, но он не работает: /.

— 04.06.2018 15:14

Должны быть некоторые другие проблемы. Как видно по указанной мной ссылке. Работает нормально. проверьте наличие других проблем с импортом. Может быть там, где ты делаешь неправильно

— 04.06.2018 15:48

Я думаю, что у меня была опечатка, потому что, когда я копировал / вставлял ваш код вместо своего, он работал, хотя я не думаю, что что-то изменилось

— 04.06.2018 16:51

04.06.2018 07:37