Next.js向组件传递editvalues作为props时报未定义错误如何解决

你遇到ReferenceError: editvalues is not defined的核心原因如下：

• EditForm组件的当前作用域内没有声明、也没有接收过名为editvalues的变量，你直接在<EditProject editvalues = {editvalues}/>里引用该变量，自然会触发未定义报错。
• 你之前执行console.log(editvalues)能正常输出，是因为代码写在onEdit函数内部，这里的editValues是函数的入参，作用域仅限该函数内部，和EditForm组件作用域完全隔离。
• 你点击编辑图标后会先跳转到/editproject/${record.project_ID}路由对应的页面，路由跳转后原TableComponent页面的内存数据会被销毁，没有做跨页面存储的情况下，新页面的EditForm组件本来就拿不到编辑数据。

方案1：通过路由ID拉取数据（推荐） #

你已经把项目ID放到了动态路由参数里，直接在EditForm页面拉取对应数据即可，示例代码如下：

// [id].tsx 完整修改后代码
import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';
import MainComponentLayout from "../../components/Layout/MainLayoutComponent"
import EditProject from "../../components/EditProjectForm";

const EditForm = () => {
    const router = useRouter();
    const { id } = router.query;
    const [editvalues, setEditvalues] = useState(null);

    useEffect(() => {
        if (!id) return;
        // 替换为你的项目详情接口
        fetch(`/api/project/${id}`)
          .then(res => res.json())
          .then(data => setEditvalues(data))
    }, [id])

    // 增加加载态避免空值报错
    if (!editvalues) return <div>加载中...</div>

    return(
        <MainComponentLayout ComponentToRender={<EditProject editvalues={editvalues}/>}/>
    )
}

export default EditForm

同时你可以把TableComponent里的onEdit函数移除，不需要再用它存数据。

方案2：本地存储跨页面传值 #

如果不想额外调用接口，可以通过localStorage做临时存储：

1. 先修改TableComponent里的onEdit逻辑：

export const onEdit = (editValues) => {
    console.log("on Edit function with values", editValues);
    // 把编辑数据存到本地存储
    localStorage.setItem('edit_project_data', JSON.stringify(editValues));
}

2. 再修改EditForm读取本地数据：

const EditForm = () => {
    const [editvalues, setEditvalues] = useState(null);

    useEffect(() => {
        const savedData = localStorage.getItem('edit_project_data');
        if (savedData) {
            setEditvalues(JSON.parse(savedData));
            // 用完记得清除避免数据错乱
            localStorage.removeItem('edit_project_data');
        }
    }, [])

    if (!editvalues) return <div>加载中...</div>

    return(
        <MainComponentLayout ComponentToRender={<EditProject editvalues={editvalues}/>}/>
    )
}

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