React函数组件使用方法及Next.js数据获取报错解决方案

一、修复Next.js数据获取报错 #

你遇到的TypeError: Cannot read property 'id' of undefined本质是数据传递错误导致products为undefined，遍历列表时触发异常，以下是具体修复步骤：

1. 修正getStaticProps的数据赋值
   你将接口返回的数据存在了data变量，但返回props时误用了未定义的products，需要把data赋值给products：

export async function getStaticProps() {
  const response = await fetch("https://fakestoreapi.com/products");
  const data = await response.json();

  return {
    props: {
      products: data, // 把接口返回的data赋值给products
    },
  };
}

2. 补充缺失的组件导入
   组件中使用了<Text>但未从Chakra UI导入，需要补充：

import { Box, Heading, Text } from "@chakra-ui/react"; // 添加Text组件导入

3. 为列表项添加唯一key
   React遍历列表要求每个子元素有唯一key，避免警告且保证渲染性能：

{products.map((product) => (
  <Box key={product.id}> {/* 添加product.id作为唯一key */}
    <Text> {product.title} </Text>
  </Box>
))}

4. 处理空数据边界情况
   用可选链操作符防止接口返回空数组时触发报错：

{products?.map((product) => ( // 可选链确保products存在时才执行map
  <Box key={product.id}>
    <Text> {product.title} </Text>
  </Box>
))}

二、React函数组件基础用法 #

函数组件是React的核心组件形式，用法简洁灵活，核心要点如下：

1. 定义组件
   用普通函数或箭头函数定义，接收props参数并返回JSX：

// 普通函数形式
function Test({ products }) {
  return <Box>{/* 组件内容 */}</Box>;
}

// 箭头函数形式
const Test = ({ products }) => {
  return <Box>{/* 组件内容 */}</Box>;
};

2. 接收父组件props
   通过参数解构直接获取父组件传递的props：

function Test({ products }) {
  // 直接使用products变量
}

3. 状态与生命周期管理
   用useState管理组件状态，useEffect处理生命周期逻辑（如挂载、更新、卸载）：

import { useState, useEffect } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 初始化状态

  useEffect(() => {
    // 组件挂载或count变化时执行
    document.title = `当前计数：${count}`;
  }, [count]); // 依赖数组，仅当count变化时触发

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={() => setCount(count + 1)}>点击加1</button>
    </div>
  );
}

4. 导出与使用组件
   定义完成后导出组件，在其他文件导入并使用：

// 导出组件
export default Test;

// 在index.js中导入并使用
import Test from '../components/testing/test';

function Home() {
  return <Test />; // 若需传参则写<Test products={...} />
}

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