javascript - React Context Provider 没有传递值

Question

我刚刚开始学习 Context 并遵循教程。完全按照 Wes Bos 所做的操作，但状态仍然没有按预期传递给消费者。

类型错误:无法读取未定义的属性“名称”发生此错误

已经尝试过制作功能组件，但同样的事情发生了

上下文组件:

import React, {Component} from 'react';

const MyContext = React.createContext();
export default class MyProvider extends Component {
    state = {
        name: "John Doe",
        age: 23,
    };

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

export const Consumer = MyContext.Consumer;

以及人员组件:

import React, {Component} from 'react';
import {Consumer} from '../Context.js'
export default class Person extends Component {
    render() {
        return (
                <Consumer>
                    {
                        (value) => {
                            return (
                                <React.Fragment>
                                    <p>I am inside the consumer {value.name} </p>
                                </React.Fragment>
                            )
                        }
                    }
                </Consumer>
        );
    }
}

预期输出应该是I am inside the Consumer John Doe

错误是这样的:TypeError:无法读取未定义的属性“名称”

Answer 1

问题似乎是您实际上并未在代码中的任何位置使用 MyContext.Provider 调用上下文提供程序组件。

我做了一个工作示例:https://codesandbox.io/s/sweet-dust-195sh

这是您的代码的另一个工作示例:https://codesandbox.io/s/vigorous-monad-hecom

您忘记调用 MyContext 组件，因为您需要将消费者子级传递给它。

import React from "react";
import ReactDOM from "react-dom";
import MyContext from "./MyContext";
import Person from "./Person";
import "./styles.css";

function App() {
  return (
    <div className="App">
      <MyContext>
        <Person />
      </MyContext>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);