[英]React Context Provider is not passing the values
我刚刚开始学习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
问题似乎是您实际上MyContext.Provider
在代码中的任何位置使用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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.