React购物车页面无法渲染本地存储商品ID对应商品的问题排查

你的代码存在三个核心问题导致商品无法初始化显示：

1. useState异步更新特性：setProArr是异步操作，执行后proArr不会立即更新，初始渲染时proArr仍为空数组，后续的map循环自然不会执行请求。
2. 异步请求未等待完成：singleProduct是异步接口调用，你直接在循环中触发请求后立刻调用setPrd(arr2)，此时请求还未完成，arr2依然是空数组。
3. 缺失依赖触发更新：useEffect的依赖数组为空，即使proArr后续从localStorage加载完成，也不会重新触发商品请求逻辑。

将逻辑拆分为两个独立的useEffect，分别负责读取localStorage和发起商品请求，同时使用Promise.all处理批量异步请求：

function Basket() {
  const [proArr, setProArr] = useState<string[]>([])
  const [prd, setPrd] = useState<Product[]>([])

  // 仅在组件挂载时读取localStorage中的购物车ID
  useEffect(() => {
    const stArr = localStorage.getItem("basket")
    if (stArr) {
      const arr = JSON.parse(stArr) as string[]
      setProArr(arr)
    }
  }, [])

  // 监听proArr变化，当ID列表更新时批量请求商品数据
  useEffect(() => {
    // 当proArr为空时不执行请求
    if (proArr.length === 0) return

    // 使用Promise.all批量处理所有异步请求
    const fetchProducts = async () => {
      try {
        const productPromises = proArr.map(item => singleProduct(item))
        const responses = await Promise.all(productPromises)
        // 提取所有响应中的商品数据
        const products = responses.map(res => res.data)
        setPrd(products)
      } catch (err) {
        console.log((err as Error).message)
      }
    }

    fetchProducts()
  }, [proArr])

  return (
    <>
      <table className="table">
        <thead>
          <tr>
            <th scope="col">Image</th>
            <th scope="col">Product Name</th>
            <th scope="col">Product Price</th>
            <th scope="col">Amount</th>
          </tr>
        </thead>
        <tbody>               
          {prd.map((item, index) => (   
            <tr key={item.id}> {/* 建议用商品ID作为key，而非index */}
              <td> 
                <div className="col-2">
                  <img src={item.images[0]} className='img-thumbnail' />
                </div>
              </td>
              <td>{item.brand}</td>
              <td>{item.price}$</td>
              <td>{item.stock}</td>
            </tr> 
          ))}            
        </tbody>
      </table>
    </>
  )
}

export default Basket;

• 将列表的key从index改为商品的item.id，避免组件重新渲染时出现不必要的性能问题或错误。
• 增加了空数组判断，避免无意义的请求触发。

内容的提问来源于stack exchange，提问作者Oğuzhan