React：布尔变量以指示在渲染之前成功获取

Question

我想使用一个布尔变量来使只有在两次不同的提取都完成后才可能进行渲染。我对 React 和 JavaScript 都很陌生，所以请耐心等待...

问题：

我的代码的相关部分：

class AddressBook extends Component {

  constructor() {
    super();
    this.state = {
      personData: [],
      projectData: [],
      hasSearched: false,
      simplePersonUrl: 'path-to-api/persons',
      simpleProjectUrl: 'path-to-api/projects',
    }
  }

  addressBookSearch(value) {
    var hasSearchedPersons = false;
    var hasSearchedProjects = false;

    if (value !== '' && value.length > 2) {
      const urlsToUse = this.apiUrlsToUse();

      fetch(`${urlsToUse["personUrl"]}${value}`)
        .then((response) => response.json()).then((responseJson) => {
        this.setState({personData: responseJson}).then(() => this.hasSearchedPersons = true)
      })

      fetch(`${urlsToUse["projectUrl"]}${value}`)
        .then((response) => response.json()).then((responseJson) => {
        this.setState({projectData: responseJson}).then(() => this.hasSearchedProjects = true)
      })
    }

    if (hasSearchedPersons == true && hasSearchedProjects == true) {
      this.setState({
        hasSearched: true
    });
    }
  }

}

然后我在render方法中有这个条件渲染：

{(this.state.hasSearched && (this.state.personData.length > 0 || this.state.projectData.length > 0)) &&
      <div>
        <Paper style={{boxShadow: 'none'}}>
          <SearchResultTab personData={this.state.personData} projectData={this.state.projectData}/>
        </Paper>
      </div>
}

{(this.state.hasSearched && this.state.personData.length <= 0 && this.state.projectData.length <= 0)
      ? <div style={{textAlign: 'center'}}>No results..</div>
      : null
}

否则渲染效果很好，但问题是渲染发生在第二次获取之前，而当渲染已经发生时没有完成。 所以我现在正试图阻止使用某些布尔值进行渲染。那是不起作用的部分。

现在，我知道承诺的最后一部分是错误的，因为它给了我：

Uncaught (in promise) TypeError: Cannot read property 'then' of undefined

它只是用来表明我想做什么：

当获取成功完成时，将布尔值 hasSearchedPersons 和 hasSearachedProjects 设置为 true。

然后当这两个都完成时，状态中的布尔 hasSearched 将被设置为 true 并且渲染将在两个提取都完成的情况下发生。

如何做到这一点？我的头快要爆炸了。谢谢。

Answer 1

只是一些关于 setState 的注释。来自 react 文档：

setState() enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state.

这意味着您每次使用 setState 更改状态时都会重新渲染您的组件。在将 hasSearch 设置为 true 之前，您重新渲染了两次组件。因此，为避免不必要的重新渲染，您应该在 fetches 完成后使用一次。 Promise.all()（已在评论中提到）是可能的。

Promise.all([
  fetch(`${urlsToUse["personUrl"]}${value}`),
  fetch(`${urlsToUse["projectUrl"]}${value}`)
]).then(responses => Promise.all(responses.map(res => res.json())
  .then(values => {
    // doing something with it.
    // once you are done use setState
    this.setState({ hasSearched: true })
  })

希望对您有所帮助。

React：布尔变量以指示在渲染之前成功获取

React: Boolean variables to indicate a successful fetch before rendering

javascript

asynchronous

promise

reactjs

fetch-api