Next.js 在下一个js中从父组件传递到组件时，props是未定义的

我有/pages/profile.js，它调用LovedOne元素，从props传递值。 调试表明，这些值在传递时是有效的

import React from "react";
import LovedOne from "../components/loved_one";

export const Profile = ({ loved_ones }) => {
  const [session, loading] = useSession();
  if (loading) return <div>loading...</div>;
  if (!session) return <div>no session</div>;

  return (
    <Layout>
      {session && (
        <>
          <img src={session.user.image} className="avatar" />
          <h1>{session.user.name}</h1>
        </>
      )}
      {loved_ones.map((loved_one, index) => (
        <LovedOne
          key={index}
          firstname={loved_one.firstname}
          surname={loved_one.surname}
          email={loved_one.email}
        />
      ))}

      <style jsx>{`
        .avatar {
          width: 220px;
          border-radius: 10px;
        }
      `}</style>
    </Layout>
  );
};

从“React”导入React；
从“./components/loved_one”导入LovedOne；
导出常量配置文件=（{爱人}）=>{
const[session，loading]=useSession（）；
如果（装载）返回装载。。。；
如果（！session）不返回任何会话；
返回(
{会话&&(
{session.user.name}
)}
{爱人。地图（（爱人，索引）=>(
))}
{`
.阿凡达{
宽度：220px；
边界半径：10px；
}
`}
);
};

但是在/components/loved_one.js中，我的道具是未定义的

import React, { useState, useRef } from "react";

export const LovedOne = ({ props }) => {
  const [setActive, setActiveState] = useState("");
  const [setHeight, setHeightState] = useState("0px");

  const content = useRef();

  function toggleAccordion() {
    setActiveState(setActive === "" ? "active" : "");
    setHeightState(
      setActive === "active" ? "0px" : `${content.current.scrollHeight}px`
    );
  }

  return (
    <div>
      <div className="row">
        <button
          className={`collection-item ${setActive}`}
          onClick={toggleAccordion}
        >
          <i className="fas fa-plus teal-text"></i>
        </button>
        <div className="col s2">
          {props.firstname} {props.surname}
        </div>
        <div className="col s2">{props.email}</div>
      </div>
      <div ref={content} style={{ maxHeight: `${setHeight}` }}>
        <span>some stuff</span>
      </div>
    </div>
  );
};

export default LovedOne;

import React，{useState，useRef}来自“React”；
导出常量LovedOne=（{props}）=>{
const[setActive，setActiveState]=useState（“”）；
常数[setHeight，setHeightState]=useState（“0px”）；
const content=useRef（）；
函数toggleAccordion（）{
setActiveState（setActive==“”？“活动”：“”；
设置高度状态(
setActive==“active”？“0px”：“${content.current.scrollHeight}px`
);
}
返回(
{props.firstname}{props.LANSAME}
{props.email}
一些东西
);
};
导出默认的LovedOne；

我试着传递单个变量，并传递整个爱人对象。我也有同样的问题

---

非常感谢任何帮助

你试过传递道具而不是{props}吗

如果没有括号，请尝试以下方法：

export const LovedOne = (props) => {

---

你试过传递道具而不是{props}吗

如果没有括号，请尝试以下方法：

export const LovedOne = (props) => {