如何从反应中的对象映射动态设置sessionStorage

Question

我有一个名为 'rounds' 的对象数组，我正在 React 中对其进行映射。我正在为数组中的每个 object/index 在图库中渲染图像。我希望可以选择分配渲染的每个图像，以及它的原始对象 key/value 对。因此，如果我 select 来自图库的第一张图像，对象 key/value 将设置为数组索引 [0] 的对象。选择第二张图片会将对象的 key/value 设置为数组索引 [1] 的 key/value，依此类推。我考虑过将这些值设置为存储在 sessionStorage 中的单个对象，以便图像 selected（及其 key/values）可以在另一个反应组件中进一步处理，即 'ReviewSingleRound'.

到目前为止，我已经尝试过，我将图像包装在 a 中，试图仅通过 onClick 事件设置与 selected 图像关联的值，但是，我可以看到会话存储值在渲染图库时设置。它不是通过 onClick 事件设置的。另一个问题是每个图像彼此具有相同的项目值，即原始对象数组中的最后一个对象。

是否有更好的方法来渲染图库，然后让图像仅使用回合数组中相应对象的 key/value 属性？

这是我的代码的 return 和地图部分：

return(
    <div>
    <h3 className='heading'> Review Rounds</h3>
    <Container className='gallery' >
      <div className='row gallery-row'>
        {
          rounds.map((roundsItem,index)=>{
            return(
              <div key={index} className='col-6 col-md-4'>
               <button onClick={sessionStorage.setItem("image", JSON.stringify(rounds[index]))}><a href="/ReviewSingleRound"> <img src={image} 
                />
                <br />Title
                </a>
               </button>
              </div>
            )
          })
        }
      </div>
    </Container>
    </div>
  )

Answer 1

您正在将 undefined 传递给 onClick：

onClick={sessionStorage.setItem("image", JSON.stringify(rounds[index]))}

你应该传递一个最终会在 localStorage

中设置一些值的函数

onClick={() => sessionStorage.setItem("image", JSON.stringify(rounds[index]))}

第二个问题的答案是您可以根据需要创建任意数量的键 - 以存储多个对象

onClick={() => sessionStorage.setItem(`image-${index}`, JSON.stringify(rounds[index]))}

如何从反应中的对象映射动态设置sessionStorage

How to set sessionStorage dynamically from Object mapping in react

javascript

array-map

reactjs