Mobx State Tree(MST)组件调用更新方法后不重新渲染求助

你的代码核心问题是每次PDF组件渲染时，都会创建一个全新的PDFMaker实例：

const PDF = function () {
  return <PDFMakerForm pdfmaker={PDFMaker.create()} />
}

当你在输入框调用setName更新状态时，修改的是上一次渲染生成的旧实例，但PDF组件重新渲染后，PDFMakerForm已经绑定了新的实例，旧实例的状态更新无法触发组件重新渲染。

需要确保PDFMaker实例在组件生命周期内只创建一次，避免每次渲染都生成新实例，以下是几种可行方案：

方案1：使用useState初始化实例 #

利用useState的初始化函数特性，仅在组件首次渲染时创建实例：

import { observer } from 'mobx-react'
import { useState } from 'react'
import PDFMaker from '../store'

const PDFMakerForm = observer(({pdfmaker}) => {
  console.log(pdfmaker)

  return (
    <div>
      <header>
        <label>Project Name: </label>
        <input type="text"
               value={pdfmaker.name}
               onChange={(e)=>pdfmaker.setName(e.target.value)}/>
      </header>
    </div>
  )
})

const PDF = function () {
  // 仅首次渲染时执行PDFMaker.create()
  const [pdfmaker] = useState(() => PDFMaker.create())
  return <PDFMakerForm pdfmaker={pdfmaker} />
}

export default PDF

方案2：使用useRef保存实例 #

通过useRef持久化实例，确保组件复用同一个实例：

import { observer } from 'mobx-react'
import { useRef } from 'react'
import PDFMaker from '../store'

const PDFMakerForm = observer(({pdfmaker}) => {
  console.log(pdfmaker)

  return (
    <div>
      <header>
        <label>Project Name: </label>
        <input type="text"
               value={pdfmaker.name}
               onChange={(e)=>pdfmaker.setName(e.target.value)}/>
      </header>
    </div>
  )
})

const PDF = function () {
  const pdfmakerRef = useRef()
  // 仅在ref为空时创建实例
  if (!pdfmakerRef.current) {
    pdfmakerRef.current = PDFMaker.create()
  }
  return <PDFMakerForm pdfmaker={pdfmakerRef.current} />
}

export default PDF

方案3：全局实例（适合简单场景） #

如果你的应用不需要多个独立的PDFMaker实例，可以直接在组件外部创建全局实例：

import { observer } from 'mobx-react'
import PDFMaker from '../store'

// 全局创建一次实例
const pdfmakerInstance = PDFMaker.create()

const PDFMakerForm = observer(({pdfmaker}) => {
  console.log(pdfmaker)

  return (
    <div>
      <header>
        <label>Project Name: </label>
        <input type="text"
               value={pdfmaker.name}
               onChange={(e)=>pdfmaker.setName(e.target.value)}/>
      </header>
    </div>
  )
})

const PDF = function () {
  return <PDFMakerForm pdfmaker={pdfmakerInstance} />
}

export default PDF

内容的提问来源于stack exchange，提问作者amankapur91