javascript - 在首次渲染期间处理组件中的未定义/空属性

我正在学习 react ，这很棒，但是我遇到了一个问题，我不确定解决该问题的最佳实践。

我从我的componentDidMount()中的API获取数据，然后使用SetState()设置了一些状态。

现在的问题是，因为第一个渲染发生在设置我的状态之前，所以我将初始状态值发送到了我的组件中。现在，我将它们设置为空数组或空对象({类型:对象，默认值:()=>({})})。
然后，我正在使用三元运算符来检查.length或该属性是否具有值。

这是最佳做法，还是我不知道其他方式？

我很乐意为此提供帮助，以便我从一开始就正确地进行基础操作。

谢谢!

最佳答案

我认为最佳做法是告诉用户您的数据仍在加载中，然后用实际数据填充字段。在各种博客文章中都倡导了这种方法。 Robin Wieruch在如何获取数据方面写了大量文章，并在specific example上介绍了如何处理加载数据和错误的方法，在此我将通过他的示例进行研究。此方法通常分为两部分。

创建一个isLoading变量。这是一个bolean。我们最初将其设置为false，因为未加载任何内容，然后在尝试获取数据时将其设置为true，然后在加载数据后又将其设置为false。

我们必须告诉React在给定的isLoading两个状态下呈现什么内容。

1.设置isLoading变量

由于您未提供任何代码，因此我将按照Wieruch的示例进行操作。

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataFromApi: null,
    };
  }

  componentDidMount() {
    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ dataFromApi: data.dataFromApi }));
  }

  ...
}

export default App;

在这里，我们使用浏览器的native fetch() api通过使用componentDidMount()来安装组件时获取数据。这应该与您现在正在执行的操作非常相似。鉴于fetch()方法是异步的，因此一旦接收到数据，页面的其余部分将呈现，并且状态将是最新的。

为了告诉用户我们正在等待数据加载，我们只需将isLoading添加到我们的状态即可。因此状态变为:

this.state = {
  dataFromApi: null,
  isLoading: false,
};

isLoading的状态最初是false，因为我们尚未调用fetch()。就在我们在fetch()中调用componentDidMount()之前，我们将isLoading的状态设置为true，如下所示:

this.setState({ isLoading: true });

然后，我们需要在fetch() Promise中添加then()方法，以在数据加载完成后将isLoading的状态设置为false。

.then(data => this.setState({ dataFromAPi: data.dataFromApi, isLoading: false }));

最终代码如下所示:

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dataFromApi: [],
      isLoading: false,
    };
  }

  componentDidMount() {
    this.setState({ isLoading: true });

    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ dataFromApi: data.dataFromApi, isLoading: false }));
  }

  ...
}

export default App;

2.有条件的渲染

React允许conditional rendering。我们可以在if方法中使用一个简单的render()语句，根据isLoading的状态来呈现组件。

class App extends Component {
  ...

  render() {
    const { hits, isLoading } = this.state;

    if (isLoading) {
      return <p>Loading ...</p>;
    }

    return (
      <ul>
        {dataFromApi.map(data =>
          <li key={data.objectID}>
            <a href={data.url}>{data.title}</a>
          </li>
        )}
      </ul>
    );
  }
}

希望这可以帮助。