Javascript 查看导入的类属性

我正在将一个普通类导入我的react（functional）组件，并希望在设置/更新导入的类属性时收到通知。我尝试将导入的类设置为仅使用

new

，作为

useState

的状态变量，作为

useRef

的引用，并尝试将每个类作为参数传递给

useffect

，但当属性第二次更新时，它们都不会触发

useffect

函数

我已经排除了所有其他代码来深入研究这个问题。我使用的是Typescript，因此我的普通类

MyClass

如下所示：

class-MyClass{
userId:string
用户：用户？
构造函数（userId:string）{
this.userId=userId
//进行网络呼叫以获取用户
getUser（）。然后（networkUser=>{
//这是因为我在这里尝试了回调，并且可以对用户进行console.log
this.user=networkUser
}).catch（（）=>{}）
}
}

然后在我的组件中：

//React组件
从“react”导入{useEffect}
从“./MyClass”导入MyClass
导出默认值（）=>{
const myClass=新的myClass（userId）
console.log（myClass.user）//此处未定义
useffect（（）=>{
console.log（myClass.user）//此处未定义，并且在更新myClass.user后不再调用
}，[myClass.user]）
返回空
}

---

同样，这也大大简化了。但问题是，当实例用户对象从

undefined

更新为

user

时，React不会重新呈现我的组件。这都是客户端的问题。如何查看

myClass.user

，以便在其最终更新时触发重新渲染？

您可以将

此用户作为道具传递并使用道具，.user in
useffect
。您可以从调用的
getUser
位置执行此操作

一个有益的解决方案是使用集中的状态解决方案，如redux或context API。然后您需要更新
在
getUser
函数中存储
，并收听
globalstate.user

结论

您需要以某种方式将this.user传递给组件。您需要根据项目进行选择。
让我猜您希望使用OOP处理应用程序的业务逻辑端，然后将状态中继回要显示的functional React组件

您需要一种机制来通知React更改。React感知（视图）状态更改的唯一方法是通过调用
setState（）
某处

传说React可以对
props
change、
context
change、
state
change做出反应。事实是，
props
和
context
更改只是
state
在更高级别上的更改

不用多说，我提出了这个解决方案，定义一个
useWatch
customhook：

功能useWatch（目标，按键）{
常量[\uuuuu，updateChangeId]=useState（0）
//使用备忘录防止不必要的呼叫
退货通知单(
() => {
常量描述符=键。减少（（acc，键）=>{
常量internalKey=`@@@uu${key}__`
acc[键]={
可枚举：正确，
对,，
得到（）{
返回目标[internalKey]
},
设置（值）{
if（目标[internalKey]！==值）{
目标[internalKey]=值
updateChangeId（id=>id+1）//我正在尝试分离逻辑，因此React将重点放在视图逻辑上，但业务逻辑在其他地方处理。理想情况下，我的组件将加载并显示加载动画，我的类将初始化并获取用户，然后该类将更新React，然后更新视图。我今天不能引入redux，因为它是一个大型existing项目，我今天不能重构那么高的东西。你可能想检查rxjs。我需要说，你想要实现的是相反的做反应的方式在我看来。这里是一个例子，如果rxjs反应；事情不是关于道具。反应只会触发重新渲染时，一些sorta设置状态called@ilkerkaran检查侧面注意我答案的一部分。还要检查
react redux
lib的源代码。诀窍是调用
forceComponentUpdateDispatch（）
通知react有关存储状态的更改。该调用可追溯到
useReducer（）
，这只是
setState（）
的另一种形式。我所说的只是“作为道具传递”或“使用contextAPI”本身并不能解决OP的问题。你能在用户更新时使用
this.render（）
重新渲染吗？我不知道，你应该在这个问题上添加TypeScript标记。：）这正是我需要的。我已经连接好了，它工作得很好。谢谢！
// React component
import { useEffect } from 'react'
import { useWatch } from './customHooks'
import MyClass from './MyClass'
export default () => {
  const myClass = useMemo(() => new MyClass(userId), [userId])

  useWatch(myClass, ['user'])

  useEffect(() => {
    console.log(myClass.user)
  }, [myClass, myClass.user])

  return null
}

function Mom() {
  const [value, setValue] = useState(0)
  setTimeout(() => setValue(v => v+1), 1000)
  return <Kid value={value} />
}

function Dad() {
  let value = 0
  setTimeout(() => value++, 1000)
  return <Kid value={value} />
}

function Kid(props) {
  return `value: ${props.value}`
}

const Context = React.createContext(0)
function Mom() {
  const [value, setValue] = useState(0)
  setTimeout(() => setValue(v => v+1), 1000)
  return (<Context.Provider value={value}>
    <Kid />
  </Context.Provider>)
}

function Dad() {
  let value = 0
  setTimeout(() => value++, 1000)
  return (<Context.Provider value={value}>
    <Kid />
  </Context.Provider>)
}

function Kid() {
  const value = React.useContext(Context)
  return `value: ${value}`
}