当我传递到下一页时，React JS如何记住列表中单击的项目

问题描述

我使用ListItem在Country.js页面中列出了一些国家。我创建了一个CodeSandBox，这是它的链接：

My Code

我希望程序记住Country.js文件列表中单击的列表项，当我转到下一页（按下一步按钮）并再次返回（按后退按钮）时，选择的项目在转到之前下一页也应选择。不好意思，我没有添加。

注意：我在表单（无线电组）中实现了此功能，但是我无法在列表中做到这一点。

解决方法

问题是您的状态当前处于CountryList组件的级别，因此每次卸载此组件时，其状态都会消失。

您需要做的是提升UserForm组件中组件的状态，以便在您更改页面时它不会消失

,

这种情况有很多解决方案（保存数据）：

• a）上下文，
• b） redux - redux持久化-保持持久性
• c） sessionStorage

当然，状态可以在组件之间传递（但是只有一种方式-没有角度方式中的两种方式进行数据绑定）

由于上下文和redux是更全局的概念-我建议您在每一步将数据保存到sessionStorage，最后收集该数据并将其发送到API或其他任何东西。

// Save data to sessionStorage
    sessionStorage.setItem('Country',countryName);
    sessionStorage.setItem('FilmSurvey',surveyName);

// Get saved data from sessionStorage
    var dataCountry = sessionStorage.getItem('Country');
    var dataSurvey = sessionStorage.getItem('FilmSurvey');

---

然后，当它起作用时，您以某种方式对其进行重构。

和一般建议-我建议使用挂钩-它们更加一致和更新