所选选项未显示在 Material UI select 字段框中

Question

我使用 Mui 创建了一个 select 组件，但每当我单击 select 下拉列表中的任何选项时，它都会以我定义的状态正确存储，但不会显示在 select 盒子.

这是我的 JSON 对象：

const SampleData = [
{
  "type": "button",
  "display": "RELEASE",
  "key": "key1",
  "value": [
    
    { 
      "type": "text", 
      "display": "Are you sure to reject this", 
      "key": "key2", 
      "value": "val10" 
    }, 
    { 
    "type": "select", 
    "display": "select reason", 
    "key": "key3", 
    "value": [
      { "type": "option", 
      "display": 
      "Wrong Truck number entered", 
      "key": "key4", 
      "value": "val1" 
    }, 
    { "type": "option", 
    "display": "Floors having intrusions", 
    "key": "key5", 
    "value": "val1" 
  }] 
    }         
  ]
}]

我的组件SelectField.js:

const SelectField = ({ SampleData }) => {

  const [selectValue, setSelectValue] = useState('');
  const [selectfieldres, setSelectFieldRes] = useState([]);
  
  useEffect(() => {
    SampleData.map((item, index) => {
      if (item.type === 'select') {
        if (typeof item.value === "object") {
          setSelectFieldRes(item.value)
        }
      }
    })

  }, [])

  
  const onChangeHandler = (e, display) => {
    const selectedText = e.target.innerText;
    console.log(selectedText)
    selectfieldres.map((item, index) => {
      if(item.display !== selectedText){
        localStorage.removeItem('select' + item.display)
      }
    }
    )
    
    if (selectedText) {
      setSelectValue({selectValue: selectedText})
      console.log(localStorage.getItem.name)
      localStorage.setItem('select' + selectedText, selectedText) 
    }
  }
  

  return (
    <Box>
      <FormControl sx={{ml: 5, my: 2, minWidth: 180 }}>
        <InputLabel id="demo-simple-select-label">select reason</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          value={selectValue} 
          label="select reason"
          onClick={(e)=>{onChangeHandler(e,display)}}
        >
          {selectfieldres.map((item, index) => (
            item.type === 'option' &&
            <MenuItem value={item.display} key={index}>
              {item.display}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    </Box>
  );
}
export default SelectField;

以上组件的输出：

选项显示在下拉列表中

当我点击任何选项时，它显示为空

Answer 1

从表面上看，您没有为 selectValue 正确设置 state。

const [selectValue, setSelectValue] = useState('');

这意味着 selectValue 是 string 类型。但是，在状态更新中，您正在尝试更改对象属性.

setSelectValue({selectValue: selectedText});

您只需将字符串传递给 setState 方法即可。

setSelectValue(selectedText);

所选选项未显示在 Material UI select 字段框中

Selected option not showing in Material UI select field box

javascript

reactjs

material-ui