Reactjs 我如何只希望单击的项目显示在模式上？

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

我正在通过接收Api数据来制作一个很棒的搜索应用程序

但我有个问题。单击项目的模式屏幕不会出现

确切地说，将显示模式屏幕。但似乎还有一些我没有点击的东西

通过在Api中查找数据id的路径，可以在屏幕上显示模式工作的方法

这就是问题所在。Seach.jsx

import styled from "styled-components";
import SearchForm from "../Components/SearchForm";
import Portal from "../Components/Portal";
import Modal from "../Components/Modal";

const Search = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [cocktails, setCocktails] = useState([]);
  const [open, setOpen] = useState(false);

  const handleOpen = (e) => {
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  useEffect(() => {
    const getDrinks = async () => {
      try {
        const response = await fetch(
          `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${searchTerm}`
        );
        const data = await response.json();
        setCocktails(data);
      } catch (error) {
        console.log(error);
      }
    };
    getDrinks();
  }, [searchTerm]);

  return (
    <main style={{ width: "100%" }}>
      <SearchForm setSearchTerm={setSearchTerm} />
      <Wrapper className="cocktail-list">
        {cocktails.drinks.map(({ idDrink, strDrink, strDrinkThumb }) => (
          <>
            <Container
              className="cocktail"
              onClose={handleClose}
              onClick={handleOpen}
            >
              <Img>
                <img src={strDrinkThumb} alt={strDrink} />
              </Img>
              <Name key={idDrink}>{strDrink}</Name>
            </Container>
            {open && (
              <Portal>
                <Modal idDrink={`${idDrink}`} onClose={handleClose} />⭐
              </Portal>
            )}
          </>
        ))}
      </Wrapper>
    </main>
  );
};

export default Search;

jsx（问题文件）将Id交给传播modals上的信息

---

如何获取单击项目的id并将其交给Modal.jsx？

您需要在搜索组件的状态中存储所选项目的id，然后将该id传递给Modal组件

import styled from "styled-components";
import SearchForm from "../Components/SearchForm";
import Portal from "../Components/Portal";
import Modal from "../Components/Modal";

const Search = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [cocktails, setCocktails] = useState([]);
  const [open, setOpen] = useState(false);


  const [selectedItem, setSelectedItem] = useState("");


  const handleOpen = (idDrink) => {
    setSelectedItem(idDrink)
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  useEffect(() => {
    const getDrinks = async () => {
      try {
        const response = await fetch(
          `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${searchTerm}`
        );
        const data = await response.json();
        setCocktails(data);
      } catch (error) {
        console.log(error);
      }
    };
    getDrinks();
  }, [searchTerm]);

  return (
    <main style={{ width: "100%" }}>
      <SearchForm setSearchTerm={setSearchTerm} />
      <Wrapper className="cocktail-list">
        {cocktails.drinks.map(({ idDrink, strDrink, strDrinkThumb }) => (
          <>
            <Container
              className="cocktail"
              onClose={handleClose}
              onClick={() => handleOpen(idDrink)}
            >
              <Img>
                <img src={strDrinkThumb} alt={strDrink} />
              </Img>
              <Name key={idDrink}>{strDrink}</Name>
            </Container>
          </>
        ))}

// You should keep modal outside the loop. Because it's rendering multiple Modals inside the loop and show all of them at once. When you trigger the hanldeOpen function.
 
      {open && (
              <Portal>
                <Modal idDrink={`${selectedItem}`} onClose={handleClose} />⭐
              </Portal>
            )}
      </Wrapper>
    </main>
  );
};

export default Search;

从“样式化组件”导入样式化；
从“./组件/SearchForm”导入SearchForm；
从“./组件/门户”导入门户；
从“./组件/模态”导入模态；
常量搜索=（）=>{
常量[searchTerm，setSearchTerm]=useState（“”）；
const[cocktails，setCocktails]=useState（[]）；
const[open，setOpen]=useState（false）；
const[selectedItem，setSelectedItem]=useState（“”）；
const handleOpen=（idDrink）=>{
设置选择项（IDD）
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
useffect（（）=>{
const getDrinks=async（）=>{
试一试{
const response=等待获取(
`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${searchTerm}`
);
const data=wait response.json（）；
设置鸡尾酒（数据）；
}捕获（错误）{
console.log（错误）；
}
};
获取饮料（）；
}，[searchTerm]）；
返回(
{鸡尾酒.饮料.地图（{idDrink，strDrink，strDrinkThumb}）=>(
handleOpen（idDrink）}
>
{strDrink}
))}
//您应该将模态保持在循环外。因为它在循环内呈现多个模态，并同时显示所有模态。当您触发hanldeOpen函数时。
{打开&&(
⭐
)}
);
};
导出默认搜索；

import styled from "styled-components";
import SearchForm from "../Components/SearchForm";
import Portal from "../Components/Portal";
import Modal from "../Components/Modal";

const Search = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const [cocktails, setCocktails] = useState([]);
  const [open, setOpen] = useState(false);


  const [selectedItem, setSelectedItem] = useState("");


  const handleOpen = (idDrink) => {
    setSelectedItem(idDrink)
    setOpen(true);
  };
  const handleClose = () => {
    setOpen(false);
  };
  useEffect(() => {
    const getDrinks = async () => {
      try {
        const response = await fetch(
          `https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${searchTerm}`
        );
        const data = await response.json();
        setCocktails(data);
      } catch (error) {
        console.log(error);
      }
    };
    getDrinks();
  }, [searchTerm]);

  return (
    <main style={{ width: "100%" }}>
      <SearchForm setSearchTerm={setSearchTerm} />
      <Wrapper className="cocktail-list">
        {cocktails.drinks.map(({ idDrink, strDrink, strDrinkThumb }) => (
          <>
            <Container
              className="cocktail"
              onClose={handleClose}
              onClick={() => handleOpen(idDrink)}
            >
              <Img>
                <img src={strDrinkThumb} alt={strDrink} />
              </Img>
              <Name key={idDrink}>{strDrink}</Name>
            </Container>
          </>
        ))}

// You should keep modal outside the loop. Because it's rendering multiple Modals inside the loop and show all of them at once. When you trigger the hanldeOpen function.
 
      {open && (
              <Portal>
                <Modal idDrink={`${selectedItem}`} onClose={handleClose} />⭐
              </Portal>
            )}
      </Wrapper>
    </main>
  );
};

export default Search;