React：渲染产品列表组件时出现空白页面问题

Question

我是新来的反应 我正在尝试使用图像在用户界面中显示产品列表。 但是当我包含以下组件时

它显示空白页。 你能让我知道如何解决它吗？ 在下面提供我的代码片段和沙箱

https://stackblitz.com/edit/vitejs-vite-bt1qht?file=package.json,src%2Fcomponents%2FProductListing.jsx,src%2Fcomponents%2FLogin.jsx,src%2Fcomponents%2FImageSearch.jsx,src% 2FApp.jsx&terminal=dev

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const ProductListing = () => {
  const [products, setProducts] = useState([]);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProducts = async () => {
      try {
        // const response = await axios.get('/api/products');
        const response = await axios.get(
          'https://jsonplaceholder.typicode.com/photos'
        );
        console.log('response', response);
        setProducts(response.data);
      } catch (error) {
        setError(error);
      }
    };
    fetchProducts();
  }, []);

  return (
    <div>
      {error ? (
        <p>Error fetching products</p>
      ) : (
        <ul>
          {products.map((product) => (
            <li key={product.id}>
              {product.name} - ${product.price}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ProductListing;

Answer 1

第一：你不需要导入

React

。

关于您的问题，这是由于导入错误造成的（正如您可能在终端中看到的那样）。问题是你正在使用

import { ProductListing } from './components/ProductListing';

而不是

import ProductListing from './components/ProductListing';

为什么？因为在你的组件中你使用了

export default

。您可以在 YouTube 上此处或此处了解有关 JavaScript 导出的更多信息。