Javascript 所选数据关闭后将消失

我有以下问题我选择的选项在我关闭并重新打开模式后消失，有人告诉我这是因为模式卸载时所有数据都会丢失？那么，如何使所选数据仍然显示

我能够检索所选数据，但我只希望在modal关闭并重新打开后，所选选项仍然存在

另外，我的select组件是不可重用的，我不知道如何优化这段代码

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import Fade from '@material-ui/core/Fade';
import Button from '../Button/Button'

const useStyles = makeStyles(theme => ({
  modal: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  paper: {
    backgroundColor: theme.palette.background.paper,
    border: '2px solid #000',
    boxShadow: theme.shadows[5],
    padding: theme.spacing(2, 4, 3),
  },
}));

 const TransitionsModal =(props) => {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button clicked={handleOpen}></Button>

      <Modal
        aria-labelledby="transition-modal-title"
        aria-describedby="transition-modal-description"
        className={classes.modal}
        open={open}
        onClose={handleClose}
        closeAfterTransition
        BackdropComponent={Backdrop}
        BackdropProps={{
          timeout: 500,
        }}
      >
        <Fade in={open}>
{props.children}
        </Fade>
      </Modal>
    </div>
  );
}
export default TransitionsModal

这是我的选择组件

import React from 'react';
import InputLabel from '@material-ui/core/InputLabel';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

export default function NativeSelects(props) {

  const [value, setValue] = React.useState('');

  const handleChange = event => {

    setValue(event.target.value);
    console.log(event.target.value)
  };


  const data = props.list.map((item, id) => {
    if (item.reciter_name_eng) {

      return <option key={item.reciter_name_eng + id} value={item.id}>{item.reciter_name_eng} {item.style}</option>
    }
    //if its not null 
    if (item.name_simple) {
      return <option key={item.name_simple + id} value={item.chapter_number}>{item.chapter_number}. {item.name_simple}</option>
    }
    if (item.language_name) {
      return <option key={item.language_name + id} value={item.id}>{item.language_name} by {item.author_name}</option>
    }
    return null

  })

  return (

    <div>
      <FormControl variant="filled">
        <InputLabel htmlFor="filled-age-native-simple">{props.type}</InputLabel>
        <Select
          native
          value={value}
          onChange={(event) => { props.changed(event.target.value, props.type); handleChange(event) }}>
          <option value={null}> </option>
          }
   {data}

        </Select>
      </FormControl>

    </div>
  );
}

function NativeSelect(props) {
  const [value, setValue] = useState(props.defaultValue);
  ...
}

---

问题是函数组件的默认状态始终为空字符串，即

const [value, setValue] = useState('');

当模态关闭时，所有组件都将卸载，这意味着当模态重新显示时，这些组件将被重新装载，因此值将返回空字符串

您需要跟踪选定的值转换模型组件，然后将其作为道具传递回NativeSelects，以便设置默认值，即

<NativeSelect defaultValue={...} />