React Hooks中加载状态不显示且列表子项需唯一key prop警告问题

问题原因 #

1. key属性绑定位置错误：你将<ul>标签写在了map循环内部，每次遍历都会生成一个独立的<ul>节点，这个<ul>才是map返回的直接子元素，你把key绑定到了内部的ExpenseItem组件上，React无法识别外层<ul>的唯一标识，所以触发唯一key的警告。
2. DOM结构不规范：正常列表结构是单个<ul>包裹多个列表项，你现在的写法会给每一条消费记录都套一层独立的<ul>，既不符合语义规范，也会导致后续样式和逻辑出问题。
3. 未新增记录就触发报错：检查父组件传入的expenses初始值是否不是空数组，只要expenses.length大于0就会进入map逻辑触发报错，哪怕数组内是无效的空对象。
4. 加载状态不显示：如果你的加载状态判断逻辑放在了expenses长度判断之后，会被优先返回的消费列表/空提示覆盖，自然不会显示加载状态，需要把加载状态的判断放在最顶部优先触发。

修复后代码 #

import React from "react";
 
import ExpenseItem from "./ExpenseItem";
import './ExpensesList.css';
 
const ExpenseList = props => {
    // 有加载状态的话在这里加判断，比如
    // if (props.loading) return <div>加载中...</div>

    if (props.expenses.length > 0) {
      // 将ul提到map外部，只生成一个ul包裹所有列表项
      return (
        <ul className="expenses-list">
          {props.expenses.map((expense) => (
            <ExpenseItem
              key={expense.id}
              title={expense.title}
              amount={expense.amount}
              date={expense.date}
            />
          ))}
        </ul>
      )
    }
 
    return <h2 className="expenses-list__fallback">未找到消费记录</h2>;
}
 
export default ExpenseList;

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