Next.js获取虚拟API数据后页面不渲染，控制台有数据求排查

核心问题及修复： #

• 状态更新方式错误：你直接给productsData变量赋值productsData = data.products，但React状态必须通过setProductsData方法更新，否则组件无法感知状态变化，也就不会触发重新渲染。这就是为什么控制台能输出数据，但页面无内容的原因。
  修复：将赋值代码替换为状态更新函数：

  setProductsData(data.products);
  

• useEffect缺少依赖数组：当前useEffect没有设置依赖项，会在组件每次渲染时重复调用API，造成不必要的请求循环。
  修复：给useEffect添加空依赖数组，确保仅在组件挂载时调用一次API：

  useEffect(() => {
    // 内部异步函数代码
  }, []);
  

• Image组件的src变量未定义：代码中使用了未声明的image变量作为图片地址，需要替换为产品数据中的图片字段（dummyjson返回的产品数据包含thumbnail或images字段）。
  修复：将src={image}修改为：

  src={product.thumbnail}
  

额外优化建议（可选）： #

当前showProductOptions是全局状态，点击任意产品会触发所有产品显示操作选项。如果需要每个产品独立控制显示状态，可以将状态改为对象，用产品id作为键来管理：

const [showProductOptions, setShowProductOptions] = useState({});

// 点击时切换对应产品的状态
onClick={() => setShowProductOptions(prev => ({
  ...prev,
  [product.id]: !prev[product.id]
}))}

// 渲染时判断对应产品的状态
{showProductOptions[product.id] && (
  <div>
    <MdOutlineSearch />
    <BsCart3 />
    <BsShuffle />
  </div>
)}

修复后的完整代码示例： #

function Shop() {
  const [productsData, setProductsData] = useState([]);
  const [showProductOptions, setShowProductOptions] = useState({});

  useEffect(() => {
    async function fetchProductsData() {
      const res = await fetch('https://dummyjson.com/products');
      const data = await res.json();
      setProductsData(data.products);
      console.log(data.products);
    }
    fetchProductsData();
  }, []);

  return (
    <div>
      <div className={styles.shoppingCard}>
        {productsData.map(product => (
          <li key={product.id} className={styles.product}>
            <Image
              src={product.thumbnail}
              alt={product.title}
              width={100}
              height={100}
              priority
              onClick={() => setShowProductOptions(prev => ({
                ...prev,
                [product.id]: !prev[product.id]
              }))}
            />
            <p className={styles.title}>{product.title}</p>
            <p className={styles.price}>{product.price}</p>
            {showProductOptions[product.id] && (
              <div>
                <MdOutlineSearch />
                <BsCart3 />
                <BsShuffle />
              </div>
            )}
          </li>
        ))}
      </div>
    </div>
  );
}

export default Shop;

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