React Context 未将类更新为值

Posted 2023-04-14

【中文标题】React Context 未将类更新为值

【英文标题】：React Context not updating for class as value

【发布时间】：2020-09-27 10:29:31

【问题描述】：

我有一个使用类实例作为上下文值的上下文。在我更新了类实例之后。这种变化不会反映在消费者身上。消费者仍然获得旧的类价值。有人可以指出如何实现这一目标的方向吗？

// 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 没有得到更新。我可以知道这是为什么吗？

【问题讨论】：

您能说明您是如何更改名称的吗？

这段代码无法编译，你应该先修复它

【参考方案1】：

这不是 React 的工作方式，它不是“真正的反应式”，仅仅因为你改变了一个值并不意味着组件会重新渲染。

导致重新渲染的唯一方法是使用 React 的 API。

见Rendering a Component in docs。

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

【讨论】：

这看起来不错。谢谢。 1）我忘记在组件之外启动服务。 2）需要一些东西来触发重新渲染