reactjs - React Context 未将类更新为值
问题描述
我有一个使用类实例作为上下文值的上下文。在我更新了类实例之后。这种变化不会反映在消费者身上。消费者仍然获得旧的类价值。有人可以指出如何实现这一目标的方向吗?
// Service class
class Service {
name = "oldName"
function changeName(newName){
this.name = newName;
}
}
//Context provider
function App() {
const service = new Service();
return (
<ServiceContext.Provider value={service}>
<Home />
</ServiceContext.Provider>
);
}
然后我尝试在一个组件中更改此服务的名称属性。
import React, { useContext } from "react";
const SomeComponent = () => {
const service = useContext(ServiceContext);
const onClick = () => {
service.changeName('newName')
console.log(service.name) //here the name has updated
}
return <button onClick={onClick}>Change</h1>;
};
并尝试从组件中获取更新的值。
//Context consumer
import React, { useContext } from "react";
const MyComponent = () => {
const service = useContext(ServiceContext);
return <h1>{service.name}</h1>;
};
但在另一个消费者中。service.name 没有得到更新。我可以知道这是为什么吗?
解决方案
这不是 React 的工作方式,它不是“真正的反应式”,仅仅因为你改变了一个值,并不意味着组件会重新渲染。
导致重新渲染的唯一方法是使用 React 的 API。
请参阅在文档中渲染组件。
class Service {
name = "oldName";
changeName(newName) {
this.name = newName;
}
}
const service = new Service();
// Provider
function App() {
const [, render] = useReducer(p => !p, false);
return (
<ServiceContext.Provider value={{ service, render }}>
<SomeComponent />
</ServiceContext.Provider>
);
}
// Usage
const SomeComponent = () => {
const { service, render } = useContext(ServiceContext);
const onClick = () => {
service.changeName("newName");
render();
};
return <button onClick={onClick}>{service.name}</button>;
};
推荐阅读
- android - 无法在 Linux 上使用命令行工具运行 android 模拟器(恐慌:损坏的 AVD 系统路径。)
- javascript - 如何删除剑道网格选定行中的边框底部
- powerbi - 将 Power BI 连接到 Cognos
- ansible - add_host - 添加所有主机
- r - 在 R 中使用矢量多边形提取光栅像素值
- django - django 测试期间数据库创建失败
- python - PermissionError: [Errno 13] Permission denied - Python/Django Locallibrary
- java - 弹出通知时如何播放声音?
- javascript - 使用 ref 访问元素内的元素
- r - 如何使用ggplot2在直方图中添加汇总统计?