Я только что слышал о 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
в двух текстовых областях?Что я сделал не так?