Javascript 反应：我有一个呈现用户数据的组件，如果有'；呈现数据时出错

我有一个section组件，它获取用户数据，然后在3个单独的标题下显示这些数据。如果数据获取失败，我想添加一个单独的呈现，它会在标题下显示一条错误消息，我不太确定这样做的最佳实践是什么。我有我的组件和服务来获取下面列出的数据，有什么建议吗

User Info Component

---

如何/在何处进行API调用并将其传递给组件？React有一个新的hooks api，它允许您在大多数情况下使用基于函数的组件，但听起来您对React还很陌生，在开始时，类和函数组件之间的二分法可能会对您有所帮助。现在，请这样想：

• 功能组件：哑。只需获取数据并进行渲染
• 类组件（或带挂钩的函数组件）：呈现数据，但也有自己的状态和生命周期方法

因此，我相信您已经意识到，不仅要有一种获取数据和呈现数据的方法，而且要有一种管理状态的方法。例如，您需要一个可以存储数据并在以后访问的位置，或者可能需要诸如“加载”（t/f）或“错误”（t/f）之类的状态信息

另一个有用的概念是组件组合。我们将利用一个更高阶的组件，它现在处理API调用（有更复杂的解决方案和库，如redux/redux sagas等），并有条件地显示表，或者显示一条错误消息

class MyComponent extends react.Component {
  constructor(props){
    super(props);
    this.state = {
      loading: false,
      error: false,
      data: {}
    }
  }

  //this is just a utility function so that you can use async / await with setState
  setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
  }

  //will run after your component is mounted to the dom
  async componentDidMount() {
    try{
      await this.setStateAsync({...this.state, loading: true})
      let data = await getCustomer();
      await this.setStateAsync({...this.state, loading: false, data})
    } catch(e) {
      this.setState({error: true, loading: false, data: {}})
    }
  }

  //stick what you would normally return in a function component here
  render() {
    return (
      {this.state.loading ? (<div>"...loading"</div>) :
         this.state.error ? (<div style={{color: 'red'}}>ERROR!</div> :
         (<CustomerDetails customer={this.state.data} />)
    )
  }
}

类MyComponent扩展了react.Component{ 建造师（道具）{ 超级（道具）； 此.state={ 加载：false， 错误：false， 数据：{} } } //这只是一个实用函数，因此您可以将async/await与setState一起使用 SetStateSync（状态）{ 返回新承诺（（解决）=>{ this.setState（状态，解析） }); } //将在组件装入dom后运行 异步组件didmount（）{ 试一试{ 等待this.setStateAncy（{…this.state，加载：true}） 让数据=等待getCustomer（）； 等待this.setStateAncy（{…this.state，加载：false，data}） }捕获（e）{ this.setState（{error:true，load:false，data:{}） } } //在函数组件中粘贴通常返回的内容 render（）{ 返回( {this.state.loading？（“…loading”）： this.state.error？（错误！： () ) } } 通读了解有关类组件的更多信息。上面的示例非常简单，但请注意：

有地方政府

组件基于道具和本地状态进行渲染

return语句将javascript包装在{}中。这包括多个ternaries以有条件地确定要呈现的内容。您可以使用更丰富的组件替换加载和错误场景，您可以根据自己的风格需求在其他地方定义这些组件

---

您能告诉我们您在哪里/如何进行API调用，以及如何获取这些信息（以及错误信息）吗到这个组件了吗？是的，我现在将编辑原始问题，将服务包括在我的axios调用中！至于错误，我希望创建一个带有图标和通用文本的简单div，在数据无法正确呈现的任何时候都会显示。因此，我实际上并没有记录错误，只是创建一个简单的div供最终用户查看任何事情发生的事件wrong@JCalkins89，您所说的“错误呈现数据”是什么意思？呈现函数中出现异常？

API service to fetch user data

import Axios from 'axios'
import { logError } from './logging'

export async function getCustomer(customer = {}) {
  try {
    const { customerId } = customer
    console.info('Customer ID:', customerId)

    const { data } = await Axios.get('https://getUserInfoAPI.com')

    return new Promise(res => {
      setTimeout(() => res(data), 3000)
    })
  } catch (error) {
    logError(error)
    throw error
  }
}

class MyComponent extends react.Component {
  constructor(props){
    super(props);
    this.state = {
      loading: false,
      error: false,
      data: {}
    }
  }

  //this is just a utility function so that you can use async / await with setState
  setStateAsync(state) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    });
  }

  //will run after your component is mounted to the dom
  async componentDidMount() {
    try{
      await this.setStateAsync({...this.state, loading: true})
      let data = await getCustomer();
      await this.setStateAsync({...this.state, loading: false, data})
    } catch(e) {
      this.setState({error: true, loading: false, data: {}})
    }
  }

  //stick what you would normally return in a function component here
  render() {
    return (
      {this.state.loading ? (<div>"...loading"</div>) :
         this.state.error ? (<div style={{color: 'red'}}>ERROR!</div> :
         (<CustomerDetails customer={this.state.data} />)
    )
  }
}