如何在点击反应挂钩时只显示一个模态

Question

我试图在学习react的同时制作一个迷你pokemon应用程序，它几乎完成了，但当我点击时，我应该将有关该pokemon的详细信息输入到模态中。但相反，我得到了所有具有pokemons数据的模态，它们一个在另一个之上。我正在使用currentTarget，但不起作用，不知道为什么。

我的代码：

import { useState, useEffect } from 'react';
const useModal = (pokemon) => {
const [isShowing, setIsShowing] = useState(false);
const [onePokemon, setOnePokemon] = useState([]);

const setCurrentPokemon = e => {
setOnePokemon(e.targetTarget.name);
console.log(setCurrentPokemon);
};

// console.log(pokemon)
function toggle() {
setIsShowing(!isShowing);
}
return {
setCurrentPokemon,
onePokemon,
isShowing,
toggle
};
};
export default useModal;

我试图用我所有的代码制作的应用程序可以在这里找到

有人能帮我弄清楚吗？

感谢

Answer 1

问题是，您已经创建了一个模态状态，该状态在循环中每个pokemon下创建的多个模态之间共享。要解决此问题，您可以使其仅为一个模态，然后在自定义挂钩中或应用程序本身中用另一个useState设置名称和URL。

例如，您可以将Home.js更改为如下

const [modalName, setModalName] = useState("");
const [modalUrl, setModalUrl] = useState("");
const { isShowing, toggle, onePokemon } = useModal(pokemon);
return (
<Main>
<Title>pokemons</Title>
<PokemonDiv>
{pokemon.map(({ name, url, id }) => (
<PokemonWrap key={name}>
<Figure>
<Alink onClick={() => {
setModalName(name);
setModalUrl(url);
toggle()
} }>
<PokeImg url={url} key={id} />
<figcaption>
<Paragraph>
Name:
<Span>{name}</Span>
</Paragraph>
</figcaption>
</Alink>
</Figure>

</PokemonWrap>
))}
</PokemonDiv>
<Modal
isShowing={isShowing}
hide={toggle}
onePokemon={onePokemon}
url={modalUrl}
name={modalName}
/>
</Main>

现在您有了一个模态组件，名称和URL是一个状态，可以在单击时更新它。