如何将父母的 Api id 传递给我的孩子？

Posted 2023-02-22

技术标签:

【中文标题】如何将父母的 Api id 传递给我的孩子？【英文标题】：How can I pass the Api id from my parents to my child? 【发布时间】：2021-04-12 00:19:55 【问题描述】：

我是初学者。提前感谢您分享您的知识。

我成功带上Api并在屏幕上显示了。

接下来，我想将“idDrink”从 Api 的参数传递到子组件。

因为我必须在子组件中使用 'idDrink' 将点击图片的 ID 交给 URL。

我们最初设置了一个使用“路由器”转到另一个页面的设备。

但我决定制作 Modal 而不是转到另一个页面。

这里有问题。

'useParams' 让接管 id 和导入 API 数据变得容易。

但我想要一个模态。我以为我不需要“Router”，因为“modal”不需要地址。

如果我错了，请告诉我。请告诉我如何解决这个问题。

这是 Main.jsx 文件

import React from "react";
import styled from "styled-components";
import  useState, useEffect  from "react";
import Search from "./Search";
import Modal from "../Components/Modal";
import Portal from "../Components/Portal";

const Main = () => 
  const url = "https://www.thecocktaildb.com/api/json/v1/1/random.php";
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [open, setOpen] = useState(false);

  async function fetchUrl() 
    const response = await fetch(url);
    const json = await response.json();
    setData(json);
    setLoading(false);
  
  useEffect(() => 
    fetchUrl();
  , []);

  const handleOpen = () => 
    setOpen(true);
    console.log("open Modal");
  ;
  const handleClose = () => 
    setOpen(false);
    console.log("close Modal");
  ;

  return (
    <Wrapper className="main">
      loading ? (
        "Loading..."
      ) : (
        <>
          data.drinks.map(
           This params ???? ( idDrink, strDrink, strAlcoholic, strGlass, strDrinkThumb ) => (
              <>
                <Container onClick=handleOpen>
                  <img src=`$strDrinkThumb` alt=`$strDrink` />
                  <div key=`$idDrink`>`$strDrink`</div>
                </Container>
                open && (
                  <Portal> 
                    <Modal key=`$idDrink` onClose=handleClose /> ???? I want to hand over here.
                  </Portal>
                )
              </>
            )
          )
        </>
      )
      <Search />
    </Wrapper>
  );
;
export default Main;

这是子组件文件 Modal.jsx

import React,  useState, useEffect  from "react";
import axios from "axios";
import styled from "styled-components";

const Modal = ( onClose, idDrink ) => 
  const [data, setData] = useState([]);

  useEffect(() => 
    let url = `https://www.thecocktaildb.com/api/json/v1/1/lookup.php?i=$idDrink`;
    axios
      .get(url)
      .then((res) => 
        setData(res.data.drinks);
      )
      .catch((error) => 
        console.log(error);
      );
  , [idDrink]); 
  return (
    <MyModals onClick=onClose>
      <Content>Detail</Content>
    </MyModals>
  );
;

export default Modal;

我之所以实现这个功能，是因为每次点击都会改变的Api地址。

请帮帮我。

【问题讨论】：

【参考方案1】：

如果我没记错的话，你想在你的 Modal 组件中传递 idDrink 的值。

使用

<Modal idDrink=idDrink onClose=handleClose />

而不是<Modal key=`$idDrink` onClose=handleClose />

在你的父组件中。希望您能够从 Modal 访问 idDrink。

【讨论】：

【参考方案2】：

<Modal id_Drink=idDrink onClose=handleClose />