Question

在react-typescript项目中使用mobx。该类使用fetch api：

设置可观察数组

require( '../application/config/routes.php');

我希望在此组件类中跟踪此可观察数据：

class MenuRepo {
  @observable menuItems?: IMenuModel[];//=[{Id:1,itemName:"asd",childItems:[]}];
  @action getItems(): void {
    fetch(`...`)
      .then((response: { value: IMenuModel[] }): void => {
        this.menuItems = [
          { Id: 1, itemName: 'test-item1', childItems: [] }
        ];
      });
  }

但是params是“未定义的”。我看了一些关于mobx＆amp;反应的教程，但无法解决它。

和App.tsx文件：

@observer
class Menu extends React.Component<{params?:IMenuModel[]}, {}> {
  render() {
    debugger
    var menuJSX : JSX.Element[] = this.props.params ? this.props.params.map((item:IMenuModel, i:number)=>{
      return (<li key={item.Id}>{item.itemName}</li>)
    }):[];
    return (...)

Answer 1

是asd instanceof MenuRepo？请注意，在第一个渲染中，menuItems将是未定义的，因为它只能在fetch解析后得到它的第一个值，这应该产生第二个渲染。

请注意，App应为observer，因为这是取消引用menuItems可观察对象的{{1}}。（有关详细信息：https://mobx.js.org/best/react.html）

将mobx可观察数据传递给道具

1 个答案: