反应 - 清理自动完成会生成错误

Question

我有一个用material-ui创建的表单，我有一个使用自动完成的文本字段，该文本字段填充了一个useEffect，该负责从API获取数据以加载自动完成。

数据不保存。

法典

const defaultProps={
options:location.name,
getOptionLabel: option =>  option.label + "-" + option.phone,
};

<Autocomplete
style={{ width: 300 }}
{...defaultProps}
id="city"
autoComplete                   
onChange={(event, newVal)=>onChange({target:{name:"name",value: newVal.label }}
)}
renderInput={params => (
<TextField {...params}   label="Country"  margin="normal" variant="outlined" inputProps={{
...params.inputProps,
}}/>
)}

是什么导致了这种行为？

Answer 1

您的问题出现在以下行中：

onChange={(event, newVal)=>onTagsChange({target:{name:"label",value: newVal.label }}

这可能与清算后null新价值有关。您可以添加保护，例如：

value: newVal || newVal.label

由于我不清楚您如何使用结果选择，因此我建议的保护可能不合适。

您可能还想在文档 (https://material-ui.com/components/autocomplete/#playground( 中查看他们的"受控"示例，其中他们使用value属性来控制AutoComplete：

<Autocomplete
{...defaultProps}
id="controlled-demo"
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
renderInput={params => (
<TextField {...params} label="controlled" margin="normal" fullWidth />
)}
/>