Компонент Mobx React не обновляется при рендеринге

Я работаю с mobx и React. У меня есть компонент класса с ComponentDidMount (который вызывает хранилище async-await). Первый выводит все поля как неопределенные, потому что приходит ответ от магазина. Когда я получил 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 mobx rendering
person ccnat    schedule 27.11.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы не изменили наблюдаемые значения 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
}
person Yonggoo Noh    schedule 28.11.2019

arrow_upward
0
arrow_downward

Измените метод хранения:

@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;
person zemil    schedule 03.12.2019