javascript - 如何在反应钩子中单击时仅显示一个模式

Question

我正在尝试在学习反应时制作一个迷你口袋妖怪应用程序，它几乎完成了，但是当我单击时，我应该将有关该口袋妖怪的详细信息放入模式中。但是，相反，我得到了所有带有 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;

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

任何人都可以帮我弄清楚吗？

谢谢

标签： javascriptreactjsreact-hooks

Answer 1

问题是您已经创建了 1 个模态状态，该状态在循环内每个口袋妖怪下创建的多个模态之间共享，要解决此问题，您可以将其设置为只有一个模态，然后使用您的另一个 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>

现在您有 1 个模态组件，名称和 URL 是在单击时更新它的状态。