已添加key仍报唯一key属性错误，Redux获取数据无法显示

一、页面无法显示数据的排查与修复 #

1. 检查Redux初始状态与Reducer更新逻辑
   确保你的products初始状态设为空数组[]，而非null或undefined。如果初始是null，第一次渲染时products && products.map不会执行；同时Reducer必须返回新状态对象，不能直接修改原state，否则React不会触发重渲染。示例正确Reducer写法：

   const initialState = {
     loading: false,
     error: null,
     products: [] // 初始为空数组
   };
   
   const productReducer = (state = initialState, action) => {
     switch(action.type) {
       case 'GET_PRODUCT_REQUEST':
         return { ...state, loading: true };
       case 'GET_PRODUCT_SUCCESS':
         return { ...state, loading: false, products: action.payload }; // 正确返回新状态
       case 'GET_PRODUCT_FAILURE':
         return { ...state, loading: false, error: action.payload };
       default:
         return state;
     }
   };
   

   同时确认getProduct action成功时，把API返回的产品数组直接传给action.payload，没有嵌套层级错误（比如不要把数据放在action.payload.data里，却在Reducer里直接赋值products: action.payload）。

2. 验证useSelector的取值路径
   打印console.log(useSelector(state => state.products))，确认和Redux DevTools里的数据结构一致。比如DevTools里数据存在state.products.data，那你需要把useSelector改成state => state.products.data。

二、"Each child in a list should have a unique 'key' prop"警告修复 #

1. 确认product._id的唯一性
   打印products.map(p => p._id)，检查是否有重复的_id值。如果API返回的产品存在重复_id，就会触发警告。临时调试可以改用数组索引（不推荐用于生产环境）：

   products.map((product, index) => (
     <h1 key={index}>{product.name}</h1>
   ))
   

   最终还是要确保每个产品有唯一的标识字段，比如让API返回唯一的_id。

2. 检查列表外层的额外元素
   如果在products.map同级有其他条件渲染元素，也要给它们加唯一key。比如：

   {loading && <p key="loading">加载中...</p>}
   {products.map(product => <h1 key={product._id}>{product.name}</h1>)}
   

三、实用调试技巧 #

在组件里添加loading和错误状态的渲染，快速定位问题：

return(
  <Fragment>
    <h2 className='homeHeading'>Featured Products</h2>
    <div className='container' id='container'>
      {loading ? <p>加载中...</p> : error ? <p>{error}</p> : (
        products.map((product) => (
          <h1 key={product._id}>{product.name}</h1>
        ))
      )}
    </div>
  </Fragment>
)

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