如何在Next.js的React组件中使用map渲染后端返回的数组数据？

1. 组件接收的data props初始未定义，服务器端渲染时直接调用data.map触发"Cannot read property 'map' of undefined"错误
2. 手动声明的_data是普通变量，更新后不会触发组件重渲染，就算获取到数据也无法展示
3. 未将用户输入的路径传递给getDupImages接口，后端大概率无法返回正确数据

1. 用React状态管理数据 #

用useState初始化数据状态为空数组，保证map方法能安全执行；同时新增状态存储用户输入的路径。

2. 修正数据更新逻辑 #

在fetchData中调用setData更新状态，触发组件重渲染展示数据；并将用户输入的路径传给接口。

3. 完善交互细节 #

绑定输入框值变化事件，给表单添加提交事件，给列表元素加唯一key，新增无数据提示。

import Head from "next/head";
import Header from "../src/components/Header";
import * as React from 'react';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import TextField from '@mui/material/TextField';
import SendIcon from '@mui/icons-material/Send';
import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import getDupImages from "../src/services/getDupImages";
import { useState } from 'react'

const Item = styled(Paper)(({ theme }) => ({
  backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
  ...theme.typography.body2,
  padding: theme.spacing(1),
  textAlign: 'center',
  color: theme.palette.text.secondary,
}));

export default function Home() {
  // 初始化数据状态为空数组，避免map报错
  const [data, setData] = useState([]);
  // 存储用户输入的路径
  const [inputPath, setInputPath] = useState("");

  const fetchData = async (path) => {
    // 传入用户输入的路径给后端接口
    const responseData = await getDupImages(path);
    console.log("DATA>>>", responseData);
    // 更新状态触发组件重渲染
    setData(responseData);
  };

  const submit = (event) => {
    event.preventDefault();
    fetchData(inputPath);
  }

  return (
    <>
      <Head>
        <title>De-Dup</title>
        <link rel="icon" type="image/ico" href="/img/goals.ico" />
      </Head>
      <Header />
      <section>
        <Box sx={{ flexGrow: 1 }}>
          <Grid container spacing={2}>
            <Grid item xs={5}>
              <Box
                component="form"
                sx={{
                  '& > :not(style)': { m: 1, width: '75ch' },
                }}
                noValidate
                autoComplete="off"
                onSubmit={submit} // 绑定表单提交事件，支持回车提交
              >
                <TextField 
                  id="outlined-basic" 
                  label="location path" 
                  variant="outlined"
                  value={inputPath}
                  onChange={(e) => setInputPath(e.target.value)} // 绑定输入框值变化
                />
                <Stack direction="row" spacing={2}>
                  <Button variant="contained" type="submit" endIcon={<SendIcon />}>
                    Submit
                  </Button>
                </Stack>
              </Box>
            </Grid>
            <Grid item xs={7}>
              {/* 空数组可安全调用map */}
              {data.map((d, index) => {
                // 添加唯一key符合React列表渲染规范
                return (
                  <div key={index}>
                    {d.title}
                  </div>
                );
              })}
              {/* 无数据时显示提示 */}
              {data.length === 0 && <div>No data to display</div>}
            </Grid>
          </Grid>
        </Box>
      </section>
    </>
  );
}

关键改动说明 #

• 用useState管理data和inputPath状态，解决初始data未定义和数据更新不渲染的问题
• 将用户输入的路径传递给getDupImages，保证接口能获取正确参数
• 给表单绑定onSubmit事件，优化提交交互
• 给列表元素添加key属性，避免React警告
• 新增无数据提示，提升用户体验

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