在 componentDidMount 中设置的 Mobx 可观察属性未在 textarea 中呈现

Question

我几个小时前才听说 Mobx 作为状态管理库。我决定通过编写以下代码来尝试一下：

import React from 'react'
import { render } from 'react-dom'
import {observable} from 'mobx';
import {observer} from 'mobx-react';

var appState = observable({athlete_name:"Cy Young"});
@observer
export default class App extends React.Component
{
  componentDidMount()
  {
    appState["athlete_name"] = "Babe Ruth"; // this variable/property will be loaded via a REST API http request
  }
  render() {

    console.log(appState["athlete_name"]);
    return (
    <form>
      <h1>{appState["athlete_name"]}</h1>
      <textarea>{appState["athlete_name"]}</textarea>
      <textarea defaultValue={appState["athlete_name"]} />
      <textarea defaultValue="Babe Ruth" />
    </form>
    )
  }
}

render(<App />, document.getElementById('app'))

但由于某种原因，前两个 textarea 打印出 Cy Young。最后一个 textarea、h1 和 console.log(appState["athlete_name"]) 按预期打印 Babe Ruth 值。为什么 Cy Young 在两个文本区域中没有被 Babe Ruth 替换？我做错了什么？

Answer 1

尝试：

<textarea value={appState["athlete_name"]}></textarea>

HTML 表单元素的工作方式与 React 中的其他 DOM 元素略有不同。参见 this

在 componentDidMount 中设置的 Mobx 可观察属性未在 textarea 中呈现

Mobx observable properties set in componentDidMount are not being rendered in textarea

reactjs

mobx