React 和 Materialize Modal 道具应该是动态的，但都使用相同的数据？

编程问答 2022-04-25

问题描述

我正在制作一个 react pokemon 应用程序并尝试使用 materialize 添加一个模态，因此当单击按钮时，模态会打开并显示相关的 pokemon 信息。模式已启动并正常打开。我得到的错误是，无论我按下哪个口袋妖怪按钮，模态都包含相同的信息。它将始终返回从更大页面组件中的此代码呈现的第一个 <PokedexListEntry /> 组件的数据。

  <div className='dex'>
        {currentPokemon.map((poke,i) => (
          <PokedexListEntry key={i} pokemon={poke} />
        ))}
      </div>

在下面的代码中，JSX 的前半部分（注释上方）呈现来自 pokemon 道具的正确数据，但模态数据保持静态。

分享完整的 React 示例非常困难，因此如果有人想查看完整代码，请点击此处https://github.com/danielwilstrop/pokemonbattle

const PokedexListEntry = ({ pokemon }) => {
  const openModal = () => {
    const modal = document.querySelector('.modal')
    const instance = M.Modal.init(modal,{})
    instance.open()
  }

  return (
    <>
      <div className='dex-list-entry'>
        <h3> {pokemon.name} </h3>
        <img src={pokemon.sprites.front_default} alt='pokemon.name' />
        <a
          className='waves-effect waves-light btn modal-trigger'
          href='#modal1'
          onClick={openModal}>
          View
        </a>
      </div>

    //Modal

      <div id='modal1' class='modal'>
        <div className='modal-content'>
          <PokedexEntry pokemon={pokemon} />
        </div>
        <div className='modal-footer'>
          <a
            href='#!'
            className='modal-close waves-effect waves-green btn-flat'>
            Close
          </a>
        </div>
      </div>
      )
    </>
  )
}

export default PokedexListEntry

<PokedexEntry /> 组件位于下方

const PokedexEntry = ({ pokemon }) => {
  return (
    <div className='dex-entry'>
      <h4>{pokemon.name}</h4>
      <img src={pokemon.sprites.front_default} alt='pokemon.name' />
      <div className='pokemon-data'>
        <p>Pokedex: #{pokemon.order}</p>
        <p>Height: {pokemon.height}"</p>
        <p className='types'>
          Types:{' '}
          {pokemon.types.map((type,i) => {
            return (
              <>
                {type.type.name}
              </>
            )
          })}
        </p>
      </div>
    </div>
  )
}

export default PokedexEntry

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

materializereactjsreactjsreactjsreactjssimplemodalsimplemodal