前端[面错误]

我试图创建一个自动完成使用材料ui，但在输入文本中的文本越来越消失后，选择任何选项。也变量'batsmanOrBowler'被设置为0后，选择任何选项。

**Backend：**调用后端服务，postman中的响应如下-

[
    {
        "striker": "SC Ganguly"
    },
    {
        "striker": "BB McCullum"
    },
    {
        "striker": "RT Ponting"
    },
    {
        "striker": "DJ Hussey"
    },
]

export const LoadService = () => {
    return myAxios
        .get(`/load`)
        .then((response) => response.data);
};

似乎还不错-

const [jsonRes, setJsonRes] = useState([]);
  useEffect(() => {
    LoadService()
      .then((data) => {
        setJsonRes(data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

'batsmanOrBowler'在这里-

<Autocomplete
                        disablePortal
                        id="combo-box-demo"
                        options={jsonRes.striker ? jsonRes.striker : jsonRes}
                        getOptionLabel={(option) => option.striker}
                        sx={{ width: 300 }}
                        renderInput={(params) => (
                          <TextField {...params} label="Movie" />
                        )}
                        name="batsmanOrBowler"
                        placeholder="Batsman"
                        type="text"
                        onChange={(e) => handleChange(e, "batsmanOrBowler")}
                        value={data.batsmanOrBowler || null}
                      />

编辑：问题的一部分由Jack和Jagroop解决。另一部分通过将'onChange'替换为'onSelect'解决。问题已修复。谢谢...