Question

我正在使用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;

Answer 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
}

Answer 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;
  }

然后制作一个具有重写组件本地状态的Dumb Component，以mobx存储道具。

@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;

Mobx React组件在渲染时不会更新

2 个答案: