Reactjs 为什么我的道具在发送到组件时未定义？

我的项目中有一个表，我有一个编辑/查看/添加页面，可以从此表访问该页面。我的目标是将单击的数据毫无问题地发送到另一个组件，但是无论我如何努力，我都会得到一个未定义的错误，并且项目被破坏。如果你能帮忙，我会很高兴的

我正在从父组件到子组件共享我的代码

表页

import React, { useState, useEffect, useCallback, useMemo } from "react";
import ManagementTable from '../components/ManagementTable'
import {
  getApps,
  updateStopRisk,
  countLiveCountry,
  updateAppShow,
  deleteApp,
} from "../api/apiCalls";
import VisibilityIcon from "@material-ui/icons/Visibility";
import DeleteIcon from "@material-ui/icons/Delete";
import EditIcon from "@material-ui/icons/Edit";
import Switch from "@material-ui/core/Switch";
import DeleteModal from "../components/DeleteModal";
import { Link } from "react-router-dom";

const Management = () => {
  const [apps, setApps] = useState([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [currentApp, setCurrentApp] = useState("");
  const [appID, setAppID] = useState(0);

  const fetchData = useCallback(async () => {
    const { data: appsResponse } = await getApps();
    const countLiveCountries = await fetchLiveCountriesForApps(appsResponse);
    setApps(
      appsResponse.map((app, idx) => ({
        ...app,
        countLiveCountry: countLiveCountries[idx],
      }))
    );

  }, []);

  useEffect(() => {
    fetchData();

  }, [fetchData]);

  const fetchLiveCountriesForApps = async (appwLive) => {
    const countLiveCountries = await Promise.all(
      appwLive.map((app) => countLiveCountry(app.appID))
    );
    return countLiveCountries.map(({ data: liveCountries }) => liveCountries);
  };

  const removeApp = async () => {
    await deleteApp(appID);
    setModalVisible(false);
    fetchData();
  };

  const onClickCancel = () => {
    setModalVisible(false);
  };

  const columns = useMemo(() => [
    {
      Header: "Application Name",
      accessor: "app_name",
    },
    {
      Header: "Business Area",
      accessor: "businessarea.businessarea_name",
    },
    {
      Header: "Live Plants",
      accessor: "countLiveCountry",
    },
    {
      Header: "Line Stop Risk",
      accessor: "app_stoprisk",
      Cell: ({ row: { original } }) => {

        const changeCheck = async (id) => {
          await updateStopRisk(id);
          fetchData();
        };
        return (
          <input
            checked={original.app_stoprisk}
            onClick={() => {
              changeCheck(original.appID);
            }}
            id="appStopRisk"
            type="checkbox"
            style={{ width: 18, height: 18, marginTop: 5 }}
          />
        )
      },
      sortType: (a, b, id) => {
        if (a.original[id] > b.original[id]) return -1;
        if (b.original[id] > a.original[id]) return 1;
      },
    },
    {
      Header: "Actions",
      Cell: ({ row: { original } }) => {
        const changeTrack = async (id) => {
          await updateAppShow(id);
          fetchData();
        };
        return (
          <>
            <Link
              className="btn btn-manage-link btn-sm col-2"
              to={{
                pathname: `/management/${original.app_name}`,
                mode: "view",
                id: original.appID
              }}
            >
              <VisibilityIcon></VisibilityIcon>
            </Link>
            <Link
              to={{
                pathname: `/management/${original.app_name}`,
                mode: "edit",
                id: original.appID
              }}
              className="btn btn-manage-link btn-sm col-2"
            >
              <EditIcon></EditIcon>
            </Link>
            <button
              onClick={() => {
                setModalVisible(true);
                setCurrentApp(original.app_name);
                setAppID(original.appID);
              }}
              className="btn btn-manage-link btn-sm col-3"
            >
              <DeleteIcon></DeleteIcon>
            </button>
            <Switch
              onClick={() => changeTrack(original.appID)}
              checked={original.app_show}
              className="col-3"
            ></Switch>
          </>
        )
      },
    },
  ],
    [fetchData]
  );

  return (
    <div className="container">
      <h2 style={{ float: "left", font: "bold" }}>Management</h2>
      <div style={{ float: "right" }}>
        <Link className="btn btn-danger btn-sm" to={{ pathname: `/management/add`, mode: "add" }}>
          Add New App
          </Link>
        <Link className="btn btn-danger btn-sm ml-3" exact to="/management/plants">
          Plant Management
          </Link>
      </div>
      <ManagementTable columns={columns} data={apps} />
      <DeleteModal
        message={<strong>{currentApp}</strong>}
        variety="app"
        onClickCancel={onClickCancel}
        onClickOk={removeApp}
        visible={modalVisible}
      />
    </div>
  );
};

export default Management;

import React，{useState，useffect，useCallback，usemo}来自“React”；
从“../components/ManagementTable”导入ManagementTable
进口{
getApps，
updateStopRisk，
countLiveCountry，
updateAppShow，
删除应用程序，
}来自“./api/apicall”；
从“@material ui/icons/Visibility”导入VisibilityIcon；
从“@material ui/icons/Delete”导入DeleteIcon；
从“@material ui/icons/Edit”导入编辑图标；
从“@material ui/core/Switch”导入开关；
从“./components/DeleteModal”导入DeleteModal；
从“react router dom”导入{Link}；
常数管理=（）=>{
const[apps，setApps]=useState（[]）；
const[modalVisible，setModalVisible]=使用状态（false）；
const[currentApp，setCurrentApp]=useState（“”）；
const[appID，setAppID]=useState（0）；
const fetchData=useCallback（异步（）=>{
const{data:appsResponse}=await getApps（）；
const countLiveCountries=等待获取livecountriesforaps（appsResponse）；
setApps(
appsResponse.map（（app，idx）=>({
…应用程序，
countLiveCountry:countLiveCountries[idx]，
}))
);
}, []);
useffect（（）=>{
fetchData（）；
}，[fetchData]）；
const fetchLiveCountriesForApps=async（appwLive）=>{
const countLiveCountries=等待承诺(
appwLive.map（（app）=>countLiveCountry（app.appID））
);
returncountlivecountries.map（{data:liveCountries}）=>liveCountries）；
};
const removeApp=async（）=>{
等待删除app（appID）；
setModalVisible（假）；
fetchData（）；
};
const onClickCancel=（）=>{
setModalVisible（假）；
};
const columns=useMemo（（）=>[
{
标题：“应用程序名称”，
访问者：“应用程序名称”，
},
{
标题：“业务区域”，
访问者：“businessarea.businessarea_name”，
},
{
标题：“活植物”，
访问者：“countLiveCountry”，
},
{
标题：“行停止风险”，
访问者：“应用程序停止风险”，
单元格：（{行：{original}}）=>{
常量更改检查=异步（id）=>{
等待更新PRISK（id）；
fetchData（）；
};
返回(
{
变更检查（原件，appID）；
}}
id=“appStopRisk”
type=“复选框”
样式={{宽度：18，高度：18，边距：5}}
/>
)
},
排序类型：（a、b、id）=>{
如果（a.original[id]>b.original[id]）返回-1；
如果（b.原件[id]>a.原件[id]）返回1；
},
},
{
标题：“行动”，
单元格：（{行：{original}}）=>{
const changeTrack=async（id）=>{
等待更新AppShow（id）；
fetchData（）；
};
返回(
{
setModalVisible（真）；
setCurrentApp（原始的应用程序名称）；
setAppID（原始.appID）；
}}
className=“btn btn管理链路btn sm col-3”
>
changeTrack（original.appID）}
选中={original.app_show}
className=“col-3”
>
)
},
},
],
[获取数据]
);
返回(
管理层
添加新应用程序
工厂管理
);
};
导出默认管理；

我转移道具的页面

import React, { useState, useEffect } from "react";
import Accordion from "../components/Accordion";
import Details from '../components/Details'
import {
  getByIdApps,
} from "../api/apiCalls";

const ApplicationManagement = (props) => {

  const [appById, setAppById] = useState([]);
  const { id } = props.location;
  const [selectOption, setSelectOption] = useState('add')

  useEffect(() => {
    getData();
    getMode();
  }, [])

  const getData = async () => {
    console.log(props.location.id)
    if (props.location.id) {
      await getByIdApps(props.location.id).then((response) => setAppById(response.data))
      console.log(appById)
      console.log(props)
    }
    else {
      setSelectOption('add')
    }
  }

  const getMode = () => props.location.mode ? setSelectOption(props.location.mode) : setSelectOption('add')

  const handleOptionChange = (event) => {
    console.log(event.target.value)
    setSelectOption(event.target.value)
  }

  return (
    <>
      <div style={{ margin: 20 }}>
        <h1>
          {appById.app_shortcode} - {appById.app_fullname}
        </h1>
        <div className="float-right mb-auto">
          <label><input type="radio" value="view" checked={selectOption === 'view'} onChange={handleOptionChange} />View</label>
          <label> <input type="radio" value="add" checked={selectOption === 'add'} onChange={handleOptionChange} />Add</label>
          <label> <input type="radio" value="edit" checked={selectOption === 'edit'} onChange={handleOptionChange} />Edit</label>
        </div>
        <br></br>
        
          <div style={{ marginLeft: 50, marginRight: 50 }} >
            <Accordion
              title={
                <div style={{ width: 1350 }}>
                  <h3>Details</h3>
                  <hr style={{ backgroundColor: "#aaa" }}></hr>
                </div>
              }
              content={
                <Details appID={id} data = {appById}></Details>
              }
            />
            <Accordion title={
              <div style={{ width: 1350 }}>
                <h3>Links</h3>
                <hr style={{ backgroundColor: "#aaa" }}></hr>
              </div>
            }></Accordion>
            <Accordion title={
              <div style={{ width: 1350 }}>
                <h3>Factory Management</h3>
                <hr style={{ backgroundColor: "#aaa" }}></hr>
              </div>
            }></Accordion>
            <Accordion title={
              <div style={{ width: 1350 }}>
                <h3>Issues Management</h3>
                <hr style={{ backgroundColor: "#aaa" }}></hr>
              </div>
            }></Accordion>
            <Accordion title={
              <div style={{ width: 1350 }}>
                <h3>Middleware Management</h3>
                <hr style={{ backgroundColor: "#aaa" }}></hr>
              </div>
            }></Accordion>
          </div>) 
          
          {selectOption === 'add'  ? (
            <div>
              Add Mode
            </div>
          ) : selectOption === 'view' ?  (<div>View Mode</div>) : (<div>eidt</div>)}
      </div>
    </>
  );
};

export default ApplicationManagement;

import React，{useState，useffect}来自“React”；
从“./组件/手风琴”导入手风琴；
从“../components/Details”导入详细信息
进口{
getByIdApps，
}来自“./api/apicall”；
const ApplicationManagement=（道具）=>{
const[appById，setAppById]=useState（[]）；
const{id}=props.location；
const[selectOption，setSelectOption]=useState（'add'）
useffect（（）=>{
getData（）；
getMode（）；
}, [])
const getData=async（）=>{
console.log（props.location.id）
if（props.location.id）{
等待getByIdApps（props.location.id）。然后（（response）=>setAppById（response.data））
console.log（appById）
控制台日志（道具）
}
否则{
setSelectOption（'add'）
}
}
const getMode=（）=>props.location.mode？setSelectOption（props.location.mode）：setSelectOption（'add'）
const handleOptionChange=（事件）=>{
console.log（event.target.value）
setSelectOption（event.target.value）
}
返回(
{appById.app_shortcode}-{appById.app_fullname}
看法
添加
编辑



) 
{selectOption==='add'(
添加模式
)：selectOption===‘查看’？（查看模式）：（eidt）}
);
};
导出默认应用程序管理；

以及ApplicationManagement页面上保存详细信息的部分（我的代码很长，我只分享问题部分）

import React，{useState，useffect}来自“React”
从“axios”导入axios；
进口{
获取责任记录，
getBusinessAreas
}来自“../api/apiCalls”
常量详细信息=（道具）=>{
常量[rTeams，setrTeams]=useState（[]）；
const[bAreas，setbeareas]=useState（[]）；
const{data}=props；
useffect（（）=>{
异步函数fetchData（）{
const getrTeams=等待getResponsibleTeams（）；
const getbAreas=等待getBusinessAreas（）；
阿西
import React, { useState, useEffect } from 'react'
import axios from "axios";

import {
  getResponsibleTeams,
  getBusinessAreas
} from '../api/apiCalls'


const Details = (props) => {

  const [rTeams, setrTeams] = useState([]);
  const [bAreas, setbAreas] = useState([]);


  const { data } = props;

  useEffect(() => {
    async function fetchData() {
      const getrTeams = await getResponsibleTeams();
      const getbAreas = await getBusinessAreas();
      axios.all([getrTeams, getbAreas]).then(
        axios.spread((...allData) => {
          const allrTeams = allData[0].data;
          const allbAreas = allData[1].data;
          setrTeams(allrTeams);
          setbAreas(allbAreas);
        })
      );
    }
    fetchData();
  }, []);

  return (
    <div>
      <div
        style={{
          float: "left",
          width: 1350,
          height: 340,
        }}
      >
          <div className="form-group">
            <label style={{ float: "left" }} htmlFor="appFullName">
              Frontend:{" "}
            </label>
            <input
              id="appFullName"
              type="text"
              class="form-control"
              placeholder="dsfdsdsf"
              value={data.frontend.frontend_name} // error here
              //onChange={handleInputChange}
              name="appShortCode"
              style={{ width: 400, marginLeft: 150 }}
            />
          </div>

      </div>
    </div>
  )
}

export default Details;



<Accordion
              title={
                <div style={{ width: 1350 }}>
                  <h3>Details</h3>
                  <hr style={{ backgroundColor: "#aaa" }}></hr>
                </div>
              }
              content={
                <Details appID={id} data = {appById}></Details>
              }
            />


{appById &&
            <Accordion
              title={
                <div style={{ width: 1350 }}>
                  <h3>Details</h3>
                  <hr style={{ backgroundColor: "#aaa" }}></hr>
                </div>
              }
              content={
                <Details appID={id} data = {appById}></Details>
              }
            />}