Question

我刚刚开始学习Context，并正在学习教程。确实做到了韦斯·波斯（Wes Bos）的所作所为，但仍然没有如预期般将状态传递给消费者。

TypeError: Cannot read property 'name' of undefined发生此错误

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

上下文组件：

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: Cannot read property 'name' of undefined

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);

React Context Provider没有传递值

1 个答案: