React MOBX 组件渲染

Question

我刚刚将this.setState替换为使用mobx observable，因为我有多个GET请求来获取数据。这样可以防止每次调用this.setState时重新渲染PieChart。

然而，现在子组件不会被重新渲染，始终保持初始占位符mobxState。我该如何在从API获取数据时使PieChart子组件重新渲染。

class Device extends React.Component {
  mobxState = {
    customOptions: [],
    rowData: []
  };

  //mount data
  componentDidMount() {
    //call the data loader
    this.fetchData();
  }

  fetchData = () => {
    axios
      .get("/custom_options.json")
      .then(response => {
        this.mobxState.customOptions = response.data.custom_options;
      })
      .then(
        //data for PieChart, need this portion to render the PieChart
        axios.get("/devices.json").then(response => {
          this.mobxState.rowData = response;
        })
      );
  };

  render() {
    return <PieChart data={this.mobxState.rowData} />;
  }
}

decorate(Device, {
  mobxState: observable
});

export default Device;

- GavinBelson

Answer 1

您需要确保您的Device组件是一个observer，如果您使用的是MobX 5以下版本，则必须在渲染方法中slice()或peek()数组。

import { observer } from "mobx-react";

class Device extends React.Component {
  // ...

  render() {
    return <PieChart data={this.mobxState.rowData.slice()} />;
  }
}

decorate(Device, {
  mobxState: observable
});

export default observer(Device);

- Tholle

---

我正在使用 mobx 5.0.3 版本。如果我尝试使用 .peek() 方法，会出现错误：this.mobxState.rowData.peek 不是一个函数。 - GavinBelson

@HoosierCoder 当然你需要先导入它。 - Tholle

已导入 observable，但未导入 _observer_。 - kingdaro

在http请求的.then部分中，出现错误：_this.mobxState.rowData.replace不是一个函数。 - GavinBelson

如果有其他人在阅读这篇文章，我的特定非渲染问题可能在堆栈级别上。我正在使用Rails 5.0.2、Webpacker和React-Rails gem。 - GavinBelson