时间戳

首页 > 解决方案 > Mobx React 组件在渲染时不更新

reactjs - Mobx React 组件在渲染时不更新

问题描述

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

标签： reactjsrenderingmobx

解决方案

您没有更改可观察值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
}

推荐阅读