React中从DB获取单条数据渲染到标签是否必须每次使用map方法

核心结论 #

当你确定接口仅返回单条对象结构数据时，完全不需要使用map方法。map是专门用来遍历数组、批量渲染多个同结构元素的API，单条数据直接访问对应属性渲染即可。 #

现有代码优化点 #

你现在的代码存在两个可优化的小问题：

• useState的解构语法错误：useState返回的是数组，应当用方括号而非花括号解构，且因为你存储的是单条对象，初始值建议设置为空对象而非空数组，避免初始渲染时读取属性异常。
• 访问属性时建议加可选链运算符?.，防止数据未加载完成/接口异常时读取属性报错。

正确实现代码 #

const { carId } = useParams();
// 方括号解构，初始值设为空对象
const [carType, setCarType] = useState({});

const getCar = (carId) => {
  CarTypes.GetCar(carId)
  .then(response => {
    // 确认response.data.data为单条对象直接赋值即可
    setCarType(response.data.data);
  })
}

return (
  // 可选链避免属性读取异常
  <h2 className="title"> { carType?.CarMake } </h2>
)

特殊情况处理 #

如果你的接口返回的单条数据被包裹在长度为1的数组中，也不需要使用map，直接取下标为0的元素即可：

setCarType(response.data.data[0])

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