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

Posted 2023-02-21

【中文标题】如何在反应中从对象映射动态设置 sessionStorage

【英文标题】：How to set sessionStorage dynamically from Object mapping in react

【发布时间】：2022-01-23 17:13:30

【问题描述】：

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

到目前为止，我已经尝试过将图像包装在 a 中，试图仅使用 onClick 事件设置与所选图像关联的值，但是，我可以看到会话存储值是在呈现画廊时设置的.它没有设置 onClick 事件。这样做的另一个问题是，每个图像都具有相同的项目值，即原始对象数组中的最后一个对象。

有没有更好的方法来渲染图库，然后让图像仅使用 rounds 数组中对应对象的键/值进行归因？

这是我的代码的返回和映射部分：

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>
  )

【参考方案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]))