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

【问题标题】：How to set sessionStorage dynamically from Object mapping in react如何在反应中从对象映射动态设置 sessionStorage
【发布时间】：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>
  )

【问题讨论】：

标签： javascript reactjs array-map

【解决方案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]))}

【讨论】：