javascript - react : componentDidMount + setState not re-rendering the component

Question

我对使用 componentDidMount 和 setState 来使用react并努力更新自定义组件相当陌生，这似乎是推荐的做法。下面是一个示例(包括用于获取数据的 axios API 调用):

import React from 'react';
import {MyComponent} from 'my_component';
import axios from 'axios';


export default class Example extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            data: []
        };
    }

    GetData() {
        return axios.get('http://localhost:5000/<route>');
    }

    componentDidMount() {
        this.GetData().then(
                (resp) => {
                    this.setState(
                        {data: resp.data}
                    )
                }
            )
    }

    render() {
        return (
            <MyComponent data={this.state.data} />
        );
  } 
}

在 render() 下面执行 console.log(this.state.data) 表明 this.state.data 确实得到了已更新(从 [] 到 API 返回的任何内容)。然而，问题似乎是 MyComponent 没有被 componentDidMount 重新渲染。来自 Facebook react 文档:

Setting state in this method will trigger a re-rendering.

这里似乎不是这种情况:MyComponent 的构造函数只被调用一次(其中 this.props.data = [])并且组件确实不会再次渲染。如果有人能解释这是为什么，以及是否有解决方案或完全不同的方法来完成更新，我会很棒。

更新

我已经为 MyComponent 添加了代码(减去一些不相关的功能，如 ... 所示)。 console.log(data_array) 打印一个空数组。

import React from 'react';

class DataWrapper {
  constructor(data) {
    this._data = data;
  }

  getSize() {
    return this._data.length;
  }

     ...
}


export class MyComponent extends React.Component {
      constructor(props) {
        super(props);

        this._dataWrapper = new DataWrapper(this.props.data);

        this.state = {
          data_array: this._dataWrapper,
        };

      }

    render() {
        var {data_array} = this.state;
        console.log(data_array);
        return (
                ...
        );
    }
 }

Answer 1

您正在成为 this antipattern. 的受害者

在 MyComponent 构造函数中，它只在第一次安装时被调用，通过 new DataWrapper 传递你的空数组，现在你有一些永远不会更新的本地状态不管你的 parent 做什么。

拥有一个真实来源总是更好，在任何地方只有一个状态对象(尤其是对于像 ajax 响应这样的事情)，并通过 props 传递它们。事实上，通过这种方式，您甚至可以将 MyComponent 编写为一个简单的函数，而不是一个类。

class Example extends Component {
  state = { data: [] }

  GetData() { .. }

  componentDidMount() {
    this.GetData().then(res =>
      this.setState({data: new DataWrapper(res.data)})
    )
  }

  render() { return <MyComponent data={this.state.data} /> }
}

...

function MyComponent (props) {
  // props.data will update when your parent calls setState
  // you can also call DataWrapper here if you need MyComponent specific wrapper
  return (
    <div>..</div>
  )
}