我有一个使用类实例作为上下文值的上下文。在我更新了类实例之后。这种变化不会反映在消费者身上。消费者仍然可以获得旧类别的价值。有人可以指出我如何实现这一目标的方向吗?
// 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。
See 在文档中渲染组件 https://reactjs.org/docs/components-and-props.html#rendering-a-component.
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>;
};
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)