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

Posted 2023-02-27

【中文标题】React：布尔变量，表示在渲染之前成功获取

【英文标题】：React: Boolean variables to indicate a successful fetch before rendering

【发布时间】：2018-06-17 19:22:28

【问题描述】：

我想使用一个布尔变量来使渲染只有在两个不同的提取都完成后才可能。我对 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

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

当获取成功时，将布尔值 h​​asSearchedPersons 和 hasSearchedProjects 设置为 true。

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

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

【问题讨论】：

你应该使用Promise.all()。

你误用了this.。

@SLaks，你能指出怎么做吗？我是一名 Java 开发人员 :) 试图弄清楚 js 这个

setState 触发 render 方法。所以在你设置hasSearched之前 - 渲染将被触发两次。

【参考方案1】：

关于setState 的一些注释。来自react docs：

setState() 将组件状态的更改排入队列并告诉 React 这个组件及其子组件需要重新渲染 更新状态。

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

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 )
  )

希望它会有所帮助。

【讨论】：

谢谢。在这种情况下，填写 state 中的 personData 和 projectData 的好方法是什么？尽量减少状态变化的时间。

@SteveWaters 您可以立即设置它：this.setStateprojects, personel