React useState钩子赋值后数据无法显示问题求助

Hey there, I totally get how frustrating it is to be stuck on a problem for days—let's get this sorted out right away!

What's Going Wrong Here #

Let's break down the core issue:

• You calculate response by mapping over product, and the console shows it has valid data. But when you pass response as the initial value to useState, productItem comes up empty.

The root cause ties to how React's useState works and the timing of your product data:

1. useState only uses the initial value you pass once, during the component's first render.
2. Chances are, when your component first renders, product is still empty (maybe it's loaded asynchronously via an API call). So the first run of product.map returns an empty array, which becomes the fixed initial value of productItem.
3. Later, when product finally loads with data, your code recalculates response and logs it—but useState doesn't automatically update the initial value. That's why you see response has data, but productItem stays empty.

How to Fix It #

Here are two reliable solutions based on your scenario:

Solution 1: Use useEffect to Sync with product Changes

If product comes from an async source (like an API) or props that might update later, use useEffect to listen for changes to product and update productItem accordingly:

import { useState, useEffect } from 'react';

// Initialize with an empty array first
const [productItem, setProductItem] = useState([]);

useEffect(() => {
  // Only update if product exists and has items
  if (product?.length) {
    const updatedImages = product.map(item => item.images);
    setProductItem(updatedImages);
    console.log("Updated productItem: ", updatedImages);
  }
}, [product]); // Re-run this effect whenever product changes

// Now productItem will update whenever product gets new data

Solution 2: Functional Initial Value (For Synchronous product)

If product is available synchronously when the component first renders (e.g., hardcoded or passed as ready props), use a functional initial value for useState. This ensures the calculation runs only once during the first render:

import { useState } from 'react';

const [productItem, setProductItem] = useState(() => {
  // This function runs only once, on the first render
  return product?.map(item => item.images) || [];
});

Quick Reminder #

React re-runs your component function every time state or props change. The console.log("response is ", response) showing valid data is probably from a later re-render, but by then useState has already locked in its initial value. Using useEffect (for async updates) or a functional initializer (for sync data) will keep productItem in sync with product.

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