Mobx React 组件在渲染时不更新答案

【问题标题】：Mobx React component doesn't update when renderedMobx React 组件在渲染时不更新
【发布时间】：2019-11-27 18:00:24
【问题描述】：

我正在使用 mobx 和 React。我有一个带有 ComponentDidMount 的 Class 组件（通过 async-await 调用存储）。第一个呈现未定义的所有字段，因为来自商店的响应即将到来。当我从 store 收到 response.data 时，组件不会更新，也不会再次渲染。所有字段都再次未定义。我的组件

import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { observable, action } from "mobx";

@inject("userStore")
@observer
class UserProfile extends Component {
  @observable firstName
  @observable lastName
  @observable sendProfile
  @observable user

  componentDidMount = async () => {
    let user = await this.props.userStore.updateUser()
    let { firstName, lastName } = user
  }

  @action onFirstNameChange = e => {
    this.firstName = e.target.value;
  };

  @action onLastNameChange = e => {
    this.lastName = e.target.value;
  };

  @action('Send data') updateProfile = async (e) => {
    e.preventDefault();
    await this.props.userStore.updateUser(this.user.id,
      {
        firstName: this.firstName,
        lastName: this.lastName,
      },
    );
    this.sendProfile = true
  }

  render() {
    return (<>
      {this.sendProfile &&
        <p> Changes update </p>
      }
      <form className="justify-content-center separar"  >
        <div className="container ">
          <button type="submit" className="btn btn-success" onClick={this.updateProfile}>SAVE</button>
        </div>
        <hr />
        <div className="form-row">
          <div className="form-group col-md-6">
            <label htmlFor="exampleFormControlInput1">Nom </label>
            <input type="text" className="form-control" id="exampleFormControlInput1" name="controlDisable"
              onChange={this.onFirstNameChange} defaultValue={this.firstName} placeholder="firstname" disabled='disabled' />
          </div>
          <div className="form-group col-md-6">
            <label htmlFor="exampleFormControlInput1">Cognoms</label>
            <input type="text" className="form-control" id="exampleFormControlInput1" name="controlDisable"
              onChange={this.onLastNameChange} defaultValue={this.lastName} placeholder="lastname" disabled='disabled' />
          </div>
        </div>
      </form>
    </>
    )
  }
}
export default UserProfile

我的商店

import { observable } from "mobx";

class UserStore {
  @observable response

   constructor(rootStore) {
        this.rootStore = rootStore;
    }
updateUser = async (id, body) => {
    id = "5dd5020aed97b727289f5f19"
    let response = await this.rootStore.requestStore.updateUserData(id, body)
    return response.data
  }
export default UserStore;

【问题讨论】：

标签： reactjs rendering mobx

【解决方案1】：

您没有更改可观察值firstName、lastName。您刚刚更改了本地范围内的值，如下所示：

componentDidMount = async () => {
  let user = await this.props.userStore.updateUser()
  let { firstName, lastName } = user // These values are not observable.
}

因此，如果您想使用 MobX 调用重新渲染，则必须更改可观察值：

componentDidMount = async () => {
  let user = await this.props.userStore.updateUser()
  let { firstName, lastName } = user

  this.firstName = firstName // change the observable values
  this.lastName = lastName
}

【讨论】：

【解决方案2】：

改变存储方式：

@action.bound
async updateUser(id, body) {
    id = "5dd5020aed97b727289f5f19";
    const response = await this.rootStore.requestStore.updateUserData(mockId, body);
    const user = await response.json();

    const { firstName, lastName } = user;
    this.firstName = firstName;
    this.lastName = lastName;

    return user;
  }

并通过将组件本地状态重写为 mobx 存储道具来制作一个 Dumb 组件。

@inject("userStore")
@observer
class UserProfile extends Component {    
  async componentDidMount() {
    await this.props.userStore.updateUser();
  }

  // place it into store
  //@action onFirstNameChange = e => {
  //  this.firstName = e.target.value;
  //};

  //and this too
  //@action('Send data') updateProfile = async (e) => {

  render() {
  // use only mobx store
  const { firstName, lastName, ...anotherPropsAndMethods } = this.props.userStore;

【讨论】：