React将ajax数据传递给孩子答案

【问题标题】：React pass ajax data to childrenReact将ajax数据传递给孩子
【发布时间】：2019-10-11 16:02:55
【问题描述】：

如何从 ajax 调用请求的父数据传递给子组件？例如我有这样的代码

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    const response = await fetch();

    this.setState(response.data);
  }

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

这里的问题是 ChildComponent 将在获取数据之前挂载，因此我将在 ChildComponent 中获取空对象数据。

【问题讨论】：

标签： javascript ajax reactjs async-await frontend

【解决方案1】：

检查数据是否可用

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    const response = await fetch();

    this.setState(response.data);
  }

  render() { // Return if response is Object
    return Object.keys(this.state).length > 0
      ? <ChildComponent data={this.state} /> // data={}
      : <div>Loading...</div>
  }

  render() { // Return if response is Array
    return this.state.length > 0
      ? <ChildComponent data={this.state} /> // data={}
      : <div>Loading...</div>
  }
}

【讨论】：

@Axnyff 他正在传递完整状态，所以他知道自己在做什么，我们只是为他提供伪代码
是的，我看他的初始代码太快了，删除了我的评论，你是对的
但是它对我有什么帮助呢？我总是会得到“正在加载...”
@netseac State 将获取数据，它将检查状态长度并显示数据，如果您的响应是 Object，我的代码将起作用，我还将更新我的 Array 代码，
是的。其作品。我只是不明白为什么之前。当状态改变时，React call 会一直重新渲染。这就是它起作用的原因。现在我明白了。非常感谢。

【解决方案2】：

您可以决定仅在有一些数据时才渲染子级。为此，也许不要用数据替换整个状态，而是创建一个单独的键。如果你需要在之后添加一些其他状态会更容易。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    const response = await fetch();

    this.setState({ data: response.data });
  }

  render() {
    const { data } = this.state;
    return data ? <ChildComponent data={data} /> : null;
  }
}

【讨论】：