Material UI Autocomplete选中选项后文本消失及变量异常问题

我尝试使用Material UI创建Autocomplete组件，但选中任意选项后输入框中的文本会消失，同时变量batsmanOrBowler会被设置为0。

后端 #

调用后端服务，在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组件代码如下：

<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解决。问题已修复，感谢帮助...

内容的提问来源于stack exchange，提问作者ereh