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

【问题标题】：How can I pass the Api id from my parents to my child?如何将父母的 Api id 传递给我的孩子？
【发布时间】：2023-03-16 16:18:01
【问题描述】：

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

我成功带上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地址。

请帮帮我。

【问题讨论】：

标签： javascript reactjs api react-hooks simplemodal

【解决方案1】：

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

使用

<Modal idDrink={idDrink} onClose={handleClose} />

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

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

【讨论】：

【解决方案2】：

使用<Modal id_Drink={idDrink} onClose={handleClose} />
在模态中添加道具：const Modal = (props) => {}
在您的模态中访问 idDrink：props.id_Drink , 在您的模态中访问句柄关闭：props.onClose()

【讨论】：