在 Nextjs 中将值作为道具传递给组件答案

【问题标题】：Passing value to Component as props in Nextjs在 Nextjs 中将值作为道具传递给组件
【发布时间】：2022-01-08 20:42:45
【问题描述】：

我正在尝试将 editvalues 作为 props 传递给我的 EditForm 组件并得到错误 editvalues is not defined。

注意：-editvalues 是一个对象

我尝试console.log(editvalues) 并在控制台中获取它们

我的[id].tsx 文件

编辑编辑值是从我的 TableComponent 传递的，请注意 TableComponent 中的 <EditTwoTone onClick = {() => onEdit(record)}/>

TableComponent.tsx

const TableComponent = ({fetchedData}) => {
  const [dataSource, setDataSource] = useState(fetchedData);
  console.log(fetchedData)
  const columns = [
    {
      title: "Project Name",
      dataIndex: "project_name",
      key: "project_name",
      sorter: (a:String,b:String) => a.project_name.length - b.project_name.length,
    },
    {
      title: "Project Description",
      dataIndex: "project_Description",
      key: "project_Description",
    },
    {
      title: "NameSpace",
      dataIndex: "project_Name_space",
      key: "project_Name_space",
    },
    {
      title: "Action",
      key: "action",
      render: (record: any) => (
        <Space size="large">
          {/* EDIT ICON */}
          <Link href={`/editproject/${record.project_ID}`}>
            <EditTwoTone onClick = {() => onEdit(record)}/>
          </Link>
          {/* DELETE ICON */}
          <DeleteOutlined
            style={{ color: "red" }}
            onClick={() => onDeleteRecord(record)}
          />
        </Space>
      ),
    },
  ];


import MainComponentLayout from "../../components/Layout/MainLayoutComponent"
import EditProject from "../../components/EditProjectForm";



const EditForm = () => {
    return(
        <MainComponentLayout ComponentToRender = {<EditProject editvalues = {editvalues}/>}/>
    )
}
export const onEdit = (editValues) => {
    console.log("on Edit function with values",editValues);
}

export default EditForm

为什么会出现未处理的运行时错误 ReferenceError: 未定义editvalues

【问题讨论】：

您是否尝试将 onEdit 函数作为道具传递？ <EditProject editvalues = {onEdit}/>
因为没有定义。您在哪里定义了您已传递给EditProject 的editvalues？ onEdit 内的 editvalues 在 EditForm 内不可访问。

标签： reactjs next.js

【解决方案1】：

你调用了一个需要传参的函数

const EditForm = () => {
    return(
        <MainComponentLayout ComponentToRender = {<EditProject editvalues = {onEdit(paramsEditValues)}/>}/>
    )
}
export const onEdit = (editValues) => {
    console.log("on Edit function with values",editValues);
}

你的函数名是onEdit，需要editValues参数

【讨论】：