javascript - 为什么我得到 “return _this.state.data”而不是JSON对象

我有一个父组件正在执行AJAX调用以获取JSON对象。我已经做了一些console.log来确保父组件中的数据是正确的，但是当我通过 Prop 时，我得到的值为:

ƒ data() {
  return _this.state.data;
}

至此，我所做的事情似乎很简单，所以我找不到问题所在。

父组件:

class InfoBox extends Component {
  state = {
    data: []
  };

  componentDidMount = () => {
    this.loadDonationsFromServer();
    setInterval(this.loadDonationsFromServer, this.props.pollInterval);
  };

  loadDonationsFromServer = () => {
    $.ajax({
      url: "https://jsonplaceholder.typicode.com/comments",
      dataType: "json",
      cache: false,
      success: data => {
        this.setState({ data });
      },
      error: (xhr, status, err) => {
        console.error(status, err.toString());
      }
    });
  };

  render = () => {
    return (
      <React.Fragment>
        <h1>Information</h1>
        <InfoList
          data={() => this.state.data}
        />
      </React.Fragment>
    );
  };
}

export default DonationBox;

子组件:

class InfoList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
  }

  componentDidMount() {
    console.log(this.state.data);
    //logs: ƒ data() {
    //         return _this.state.data;
    //      }
  }
  render() {
    return <div> Placeholder </div>;
  }
}

export default InfoList;

我尝试在子组件中使用bind，但仍然得到了相同的结果:

  constructor(props) {
    super(props);
    this.state = {
      data: this.props.data
    };
    this.checkData = this.checkData.bind(this);
  }

  componentDidMount() {
    this.checkData();
  }

  checkData = () => {
    console.log(this.state.data);
  };

最佳答案

首先，是，您应该将发送到data的InfoList Prop 更改为this.state.data而不是匿名函数。因此:<InfoList data={this.state.data} />但是，主要问题是在子组件中使用componentDidMount，当真正使用时，您应该改用componentWillReceiveProps。

componentDidMount仅被调用一次，它不会等待您的AJAX
在初始componentDidMount之前，调用render生命周期挂钩一次。
在子组件的componentDidMount中，您尝试记录this.state.data-但此状态基于构造函数中设置的内容，即在您首次安装data时作为InfoList Prop 传入的内容。那是[]，因为InfoBox尚未从其Ajax调用接收回数据。换一种方式:

每当 Prop 更改时，都会调用componentWillReceiveProps
相反，您的子组件应该使用componentWillReceiveProps生命周期挂钩。每当组件接收到新的 Prop 时，就会调用此方法。一旦 parent 的状态发生变化(在负荷捐赠返回之后)，它将新的 Prop 传递给 child 。在componentWillReceiveProps中， child 可以使用这些新 Prop 并更新其状态。

我创建了一个code sandbox，它通过一堆日志语句向您显示什么时候发生了什么，以及生命周期中各个阶段的 Prop 和状态。与实际执行ajax提取不同，我只是等待2秒以模拟提取。在InfoList.js中，componentWillReceiveProps的代码当前已被注释掉；这样，您可以了解事物的现状。删除注释并开始使用componentWillReceiveProps后，您将看到如何修复它们。

额外资源

这是helpful article，几乎描述了您面临的相同问题。

React生命周期挂钩的极佳快速引用是React Cheat Sheet)

关于javascript - 为什么我得到 “return _this.state.data”而不是JSON对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54896750/