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

问题描述

我是初学者。预先感谢您分享您的知识。

我成功地带来了 Api 并将其显示在屏幕上。

接下来，我想将 Api 的 Params 中的 'idDrink' 传递给孩子们的组件。

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

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

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

这里有问题。

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

但我想要一个模态。我以为我不需要“路由器”，因为“模态”不需要地址。

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

这是 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地址。

请帮帮我。

解决方法

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

使用

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

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

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

,

1. 使用<Modal id_Drink={idDrink} onClose={handleClose} />
2. 在你的模态中添加道具：const Modal = (props) => {}
3. 在您的模式中访问 idDrink：props.id_Drink,在您的模式中访问 handleClose：props.onClose()