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

我几个小时前刚刚听说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'))

从“React”导入React
从'react dom'导入{render}
从“mobx”导入{observable}；
从'mobx react'导入{observer}；
var appState=可观察（{运动员姓名：“赛扬”}）；
@观察者
导出默认类App扩展React.Component
{
componentDidMount（）
{
appState[“运动员姓名”]=“Babe Ruth”；//此变量/属性将通过REST API http请求加载
}
render（）{
console.log（appState[“运动员姓名]）；
返回(
{appState[“运动员姓名”]}
{appState[“运动员姓名”]}
)
}
}
render（，document.getElementById（'app'））

但出于某种原因，前两个

textarea

打印

Cy-Young

。最后一个

textarea

、

h1

和

console.log（appState[“运动员姓名”）

按预期打印

Babe Ruth

值。为什么在两个文本区域中，

Cy Young

没有被

Babe Ruth

取代？我做错了什么？

试试：

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

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

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

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

---

请参见

defaultValue仅用于设置初始值。这就是为什么在更新状态后输入不会更新。如果要更新，您需要使用“value”。defaultValue的意思是设置初始值，仅此而已。这就是为什么在更新状态后输入不会更新。如果希望更新，则需要使用“值”。