React中如何将API获取的数组渲染到CSelect选择组件中

问题分析 #

• 1. 异步请求与渲染时机不匹配：UserService.getProvince()是异步接口，你在render阶段直接调用renderProvinces()时，接口还没返回数据，函数没有可返回的有效DOM元素。
• 2. 没有使用状态存储省份数据：你用普通变量provinces存接口返回的数据，就算接口请求完成赋值，也不会触发组件重渲染，视图不会更新。
• 3. 函数没有返回生成的option列表：renderProvinces本身没有return值，而且then回调里的provinces.map生成的option数组也没有被return出去，就算同步执行也不会渲染任何内容。

修正代码 #

import { useState, useEffect } from 'react'
const RequestAgency = (props) => {
  // 用state存省份数据，修改后会触发重渲染
  const [provinces, setProvinces] = useState([])

  // 组件挂载时请求省份数据
  useEffect(() => {
    UserService.getProvince().then((response) => {
      setProvinces(response.data)
    })
  }, [])

  return (
    <CFormGroup row>
      <CCol md="3">
        <CLabel htmlFor="province"> province</CLabel>
      </CCol>
      <CCol xs="12" md="9">
        <CSelect custom name="province" id="province" >
          {/* 直接遍历state里的省份数据生成option */}
          {provinces.map(province => (
            <option key={province.ID} value={province.ID}>{province.ItemName}</option>
          ))}
        </CSelect>
      </CCol>
    </CFormGroup>
  )
}
export default RequestAgency

注意：渲染列表元素时必须加key属性，避免React渲染异常。

内容的提问来源于stack exchange，提问作者Gandom