javascript - react : I have a component that renders user data and I want to display an error message underneath the section if there's an error rendering the data

Question

我有一个部分组件，用于获取用户数据，然后在 3 个单独的标题下显示该数据。如果数据获取失败，我想添加一个单独的渲染，这将在标题下方显示一条错误消息，并且我不太确定执行此操作的最佳实践是什么。我有我的组件和服务来获取下面列出的数据，有什么建议吗？

User Info Component

import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import {
  Col,
  Row,
  Input,
  Checkbox
} from 'antd'


const CustomerDetails = ({ customer }) =>
  !!Object.keys(customer).length && (
    <Container>
      <h2>
        {/* Name */}
        Test Test
      </h2>
      <Row>
        <Col span={8}>
          <Ul>
            <h3><strong>Primary Contact</strong></h3>
            <li>Jane Doe</li>
            <li>212-333-3333</li>
          </Ul>
        </Col>
        <Col span={8}>
          <Ul>
            <h3><strong>Service Address</strong></h3>
            <li>1234 Stone Ave N</li>
            <li>STE FR6</li>
            <li>Seattle, WA 12345</li>
          </Ul>
        </Col>
        <Col span={8}>
          <Ul>
            <h3><strong>Billing Address</strong></h3>
            <li>1234 Stone Ave N</li>
            <li>STE FR6</li>
            <li>Seattle, WA 12345</li>
          </Ul>
        </Col>
      </Row>
      <br />
      <Row>
        <Col span={10}>
          <h4>PRIMARY CONTACT EMAIL</h4>
        </Col>
      </Row>
      <Row>
        <Col span={8}>
          <StyledInput />
        </Col>
        <Col span={12}>
          <StyledCheckbox /> EMAIL OPT OUT
        </Col>
      </Row>
      <br />
      <Row>
        <Col>
          <StyledCheckbox /> TAX EXEMPT
        </Col>
      </Row>
      <br />
      <Row>
        <Col>
          <h4>GO TO BUNDLE BUILDER</h4>
        </Col>
      </Row>
    </Container>
  )

CustomerDetails.propTypes = {
  customer: PropTypes.object
}

CustomerDetails.defaultProps = {
  customer: {}
}

const Container = styled.div`
  margin: 15px 5px;
`
const StyledCheckbox = styled(Checkbox)`

`
const StyledInput = styled(Input)`
  max-width: 75%;
`
const Ul = styled.ul`
  list-style-type: none;

  li {
    font-size: 1rem;
  }
`

export default CustomerDetails

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

Answer 1

您如何/在哪里进行 API 调用并将其传递给您的组件？ React 有一个新的 hooks api，可以让你使用基于函数的组件来完成大多数事情，但听起来你对 React 还很陌生，类和函数组件之间的二分法可能对你开始时有帮助。现在，这样想:

• 功能组件:愚蠢。只需获取数据并渲染它。
• 类组件(或带钩子(Hook)的函数组件):渲染数据，但也有自己的状态和生命周期方法

因此，我相信您已经意识到，不仅有一种获取数据和呈现数据的方法很重要，而且有一种管理状态的方法也很重要。例如，您想要一个可以存储数据并稍后访问它的位置，或者可能声明“正在加载”(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} />)
    )
  }
}

通读this有关类组件的更多信息。上面的例子非常简单，但请注意:

1. 有本地状态
2. 组件根据 props 和本地状态进行渲染
3. return 语句将 javascript 封装在 {} 中。这包括多个三元组来有条件地确定要渲染的内容。您可以根据自己的风格需求，使用可以在其他地方定义的更充实的组件来替换加载和错误场景。