如何使用挂钩将状态值从一个组件传递到另一个组件

Question

我正在尝试将状态值从一个组件传递到另一个组件。我的要求是开发两个组件，其中组件A处理状态以获取学生详细信息，并且组件B希望在表格格式中从组件B中呈现学生的详细信息。我已经尝试在组件A中导入组件B，然后通过了组件A的状态A。我尝试在组件B中使用MAP函数，并尝试以表格格式显示数据，但我最终以未定义的方式显示请参阅控制台中的数组值。我尝试在组件本身中进行地图，并将其作为道具将其传递给组件B。现在我也得到了不确定的。任何人都可以帮助我做错了什么。提前致谢。我已经写下了代码。

//旧方法 组件A：

  const studentDetails = [
    { studentID: "001", studentName: "StuOne", studentMarks: "80" },
    { studentID: "002", studentName: "StuTwo", studentMarks: "90" },
    { studentID: "003", studentName: "StuThree", studentMarks: "60" },
    { studentID: "004", studentName: "StuFour", studentMarks: "70" },
    { studentID: "005", studentName: "StuFive", studentMarks: "85" },
  ];

  const [studentdata, setStudentData] = useState([studentDetails]);

  return (
    <div>
      <Header />
      <Details stuDetails={studentdata} />
    </div>
  );

**Component B** 
function Details({ stuDetails }) {
  console.log("Studetals", stuDetails);

  return (
    <div>
      <div className="Main">
        <table>
          <tr>
            <th>Student ID</th>
            <th>Student Name</th>
            <th>Student Mark</th>
          </tr>
          {stuDetails.map((val) => {
            console.log("val", val);

            return (
              <tr>
                <td>{val.studentID}</td>
                <td>{val.studentName}</td>
                <td>{val.studentMarks}</td>
              </tr>
            );
          })}
        </table>
      </div>
    </div>

新方法

**Component A :**
function Main() {
  const studentDetails = [
    { studentID: "001", studentName: "StuOne", studentMarks: "80" },
    { studentID: "002", studentName: "StuTwo", studentMarks: "90" },
    { studentID: "003", studentName: "StuThree", studentMarks: "60" },
    { studentID: "004", studentName: "StuFour", studentMarks: "70" },
    { studentID: "005", studentName: "StuFive", studentMarks: "85" },
  ];

  const [studentdata, setStudentData] = useState([studentDetails]);

  return (
    <div>
      <Header />
      {studentdata.map((value) => (
        <Details
          id={value.studentID}
          name={value.studentName}
          mark={value.studentMarks}
        />
      ))}
    </div>
  );
}

**Component B** 

function Details(props) {
  console.log("PROPS", props);
  return (
    <div>
      <div className="Main">
        <table>
          <tr>
            <th>Student ID</th>
            <th>Student Name</th>
            <th>Student Mark</th>
          </tr>
          <tr>{props.id}</tr>
          <tr>{props.name}</tr>
          <tr>{props.mark}</tr>
        </table>
      </div>
    </div>