Reactjs 刷新/重新加载页面后，如何保持React Material UI multiple select的输入值？

我有一个react material ui multi-select，它显示了我所有场馆的列表，我可以从中选择多个场馆。现在，当我在多次选择后刷新页面时，我的所有选择都会消失，并且所选列表不会显示任何内容；但我希望它在页面刷新/重新加载后保留选定的值。这是我的密码：

const addEventContent = () => {
  const venueNames = venues.map((item) => item.name);
  const venueIds = venues.map((item) => item.id);
  const names = {};
  venueIds.forEach((key, i) => (names[key] = venueNames[i]));
  return(
   <>
    .
    .
    .
          <FormControl className={classes.formControl}>
              <InputLabel id='demo-mutiple-checkbox-label'>Venues</InputLabel>
              <Select
                  labelId='demo-mutiple-chip-label'
                  id='demo-mutiple-chip'
                  multiple
                  value={venueId}
                  onChange={handleChange}
                  input={<Input id='select-multiple-chip' />}
                  renderValue={(selected) => (
                  <div className={classes.chips}>
                     {selected.map((value) => (
                       <Chip
                        key={value}
                        label={names[value]}
                        className={classes.chip}
                        />
                        ))}
                   </div>
                  )}
                 >
                  {Object.keys(names).map((id) => (
                    <MenuItem key={id} value={id}>
                      {names[id]}
                    </MenuItem>
                  ))}
                </Select>
           </FormControl>
   .
   .
   .
  <>
}
const handleChange = (event) => setVenueId(event.target.value);

const addEventContent=（）=>{
const venueNames=场馆.地图（（项目）=>项目.名称）；
const venueIds=场馆地图（（项目）=>项目id）；
常量名称={}；
forEach（（key，i）=>（name[key]=venueNames[i]）；
返回(
.
.
.
场馆
(
{选定的.map（（值）=>(
))}
)}
>
{Object.keys（names）.map（（id）=>(
{names[id]}
))}
.
.
.
}
const handleChange=（event）=>setVenueId（event.target.value）；

---

如果您有任何帮助或提示，我将不胜感激。

您可以始终使用

localStorage

来存储这些在刷新过程中保持不变的值。除了使用浏览器提供的存储之外，我不确定是否有方法在重新加载后通过客户端保持这些数据

您可以添加另一个函数，如下所示：

function getVenueId() {
  const localStorage = window.localStorage;
  let venueId;

  if(localStorage) {
    localStorage.getItem('venue-id-selected-value');
  }
  return venueId;
}

let [venueId, setVenueId] = useState(getVenueId());

const handleChange = (event) => {
  const localStorage = window.localStorage;
  localStorage.setItem('venue-if-selected-value',`${event.target.value}`);
  setVenueId(event.target.value);
}

使用

useState

初始化

venueId

时，可以按如下方式调用此函数：

function getVenueId() {
  const localStorage = window.localStorage;
  let venueId;

  if(localStorage) {
    localStorage.getItem('venue-id-selected-value');
  }
  return venueId;
}

let [venueId, setVenueId] = useState(getVenueId());

const handleChange = (event) => {
  const localStorage = window.localStorage;
  localStorage.setItem('venue-if-selected-value',`${event.target.value}`);
  setVenueId(event.target.value);
}

最后，在

handleChange

函数中，只需将localStorage中的项设置为所选值，如下所示：

function getVenueId() {
  const localStorage = window.localStorage;
  let venueId;

  if(localStorage) {
    localStorage.getItem('venue-id-selected-value');
  }
  return venueId;
}

let [venueId, setVenueId] = useState(getVenueId());

const handleChange = (event) => {
  const localStorage = window.localStorage;
  localStorage.setItem('venue-if-selected-value',`${event.target.value}`);
  setVenueId(event.target.value);
}

请注意此方法的注意事项：

=>只能在

localStorage

中存储字符串值

=>

localStorage

数据特定于网页的协议

编辑：如果您正在寻找一个不必长时间保存的解决方案，例如直到选项卡关闭，那么

sessionStorage

可能是一个更好的选择。解决方案基本上还是一样的。您只需在代码中将

localStorage

替换为

sessionStorage