Reactjs Can'；不要在my.jsx中使用包装的获取组件

我有一个MainComponentWrapper，它是一个获取：

export default function MainComponentWrapper({ url, children }) {
  const classes = useStyles()
  const [data, setData] = React.useState()

  React.useEffect(() => {
    fetch(url, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Authorization: "Bearer " + window.localStorage.getItem("access_token"),
      },
    })
      .then(resp => {
        return resp.json()
      })
      .then(fetchedData => {
        setData(fetchedData)
      })
      .catch(error => {
        console.log(error)
          window.localStorage.removeItem("access_token")
          window.location.replace("/")
      })
  }, [url])
  if (data === undefined) {
    return (
      <div className={classes.root}>
        <CircularProgress className={classes.progress} />
      </div>
    )
  }

  return (
    <div className={classes.root}>
      {React.cloneElement(children, { data: data })}
    </div>
  )
}

导出默认函数MainComponentWrapper（{url，children}）{
常量类=useStyles（）
const[data，setData]=React.useState（）
React.useffect（（）=>{
获取（url{
方法：“获取”，
标题：{
“内容类型”：“应用程序/json”，
授权：“载体”+window.localStorage.getItem（“访问令牌”），
},
})
。然后（resp=>{
return resp.json（）
})
。然后（fetchedData=>{
设置数据（获取数据）
})
.catch（错误=>{
console.log（错误）
window.localStorage.removietem（“访问令牌”）
window.location.replace（“/”）
})
}，[url]）
如果（数据===未定义）{
返回(
)
}
返回(
{React.cloneElement（子项，{data:data}）}
)
}

我试图在.jsx组件中使用它，以便通过传递api url获得所需的数据，并将其打印到表中

export default function Machines({data}) {

  return (
    <div className={classes.root}>
      <h1>Azure machines</h1>
      <Table className={classes.table} size="small">
        <TableHead>
          <TableRow>
            <TableCell align="left">name</TableCell>
            <TableCell align="left">resource_group</TableCell>
            <TableCell align="left">location</TableCell>
            <TableCell align="left">status</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map(row => (
            <TableRow key={row.name + row.resource_group}>
              <TableCell align="left" component="th" scope="row">
                <StyledButton size = "small" className={style.size3}>
                     <Link  style={{ color: 'inherit', textDecoration: 'inherit'}} to={`/machines/${row.resource_group + "/" + row.name}`}>{row.name}</Link>
                  </StyledButton>
              </TableCell>
              <TableCell align="left">{row.resource_group}</TableCell>
              <TableCell align="left">{row.location}</TableCell>
              <MainComponentWrapper url={"/api/machine/one"} >
                {({ tmpData }) => (
                <TableCell key= {row.location + row.name}  log={console.log(data.status)} align="left">
                <LoadingIndicator/>
                  <MachineStatusIcon
                      status_code={tmpData.status_code}
                      status={tmpData.status}
                   />
               </TableCell>
            )}
           </MainComponentWrapper>
          </TableRow>
         ))}
        </TableBody>
      </Table>

    </div>

  )
}

导出默认函数机（{data}）{
返回(
Azure机器
名称
资源组
位置
地位
{data.map（行=>(
{row.name}
{row.resource_group}
{row.location}
{（{tmpData}）=>(
)}
))}
)
}

问题是我找不到使用它的方法，我检查了一些类似的例子，但没有成功。

---

如果我在google chrome上检查并检查网络选项卡，我可以看到组件正在获取数据，因为数据列在那里，但是我如何使用它作为值传递到我的表中？

您的MainComponentWrapper位于您定义了“数据”的内部。包装器应该封装整个JSX代码，在本例中是表

<MainComponentWrapper url={"/api/machine/one"} >
<TableBody>
      <!-- data is being used here but it didn't exist -->
      {data.map(row => (
        <TableRow key={row.name + row.resource_group}>
          <TableCell align="left" component="th" scope="row">
            <StyledButton size = "small" className={style.size3}>
                 <Link  style={{ color: 'inherit', textDecoration: 'inherit'}} to={`/machines/${row.resource_group + "/" + row.name}`}>{row.name}</Link>
              </StyledButton>
          </TableCell>
          <TableCell align="left">{row.resource_group}</TableCell>
          <TableCell align="left">{row.location}</TableCell>
            {({ tmpData }) => (
            <TableCell key= {row.location + row.name}  log={console.log(data.status)} align="left">
            <LoadingIndicator/>
              <MachineStatusIcon
                  status_code={tmpData.status_code}
                  status={tmpData.status}
               />
           </TableCell>
        )}

      </TableRow>
     ))}
    </TableBody>
   </MainComponentWrapper>

{data.map（行=>(
{row.name}
{row.resource_group}
{row.location}
{（{tmpData}）=>(
)}
))}

您如何处理jsx组件中的数据（即如何接收数据）？您忽略了这一部分。更新了问题，基本上我将数据作为参数传递，我可以获取它，因为我传递了页面上的包装器上的url：

const MachineWrapper=props=>{const url=“/api/machine”return（）}

但由于我想直接在这里获取，我不知道如何访问从mainComponentWrapper获取的对象，因为我在“网络”选项卡上看到了它们。我的第一个想法是在将JSX返回到计算机之前，先对数据进行console.log，然后再查看其中的内容。如果你能用任何可能有用的数据更新你的问题。此外，数据永远不应该是未定义的，因为它是在useState中定义的。您需要为数据提供默认值。const[data，setData]=React.useState（初始值）