stateNPAValue[formData.state.vale] = 0: "All",1: "959", 2: "203",3: "860", 4: "475" // API response for NPA data
const [selectedNamesState, setSelectedNamesState] = useState([]);
const transformedNpaData = stateNPAValue[formData.state.value].map((label, index) => ({
label,
value: index.toString() // You can use the index as the value or any unique identifier
}));
<Autocomplete
multiple
id="fixed-tags-demo"
name="Npa"
value={selectedNamesState}
onChange={(event, newValue) => {
setSelectedNamesState(newValue)
NPAHandler(newValue);
changeHandleStateErrorRemove(event)
}}
options={transformedNpaData}
getOptionLabel={(option) => option.label.replace(/[\[\]']+/g, '')}
defaultValue={[transformedNpaData[0].label]}
renderTags={(tagValue, getTagProps) =>
tagValue.map((option, index) => (
<Chip
label={option.label.replace(/[\[\]']+/g, '')}
{...getTagProps({ index })}
/>
))
}
style={{ width: 500 }}
renderInput={(params) => <TextField {...params} label={formData.state.value} />}
isOptionEqualToValue={(option, value) => {
return option.value === value.value;
}}
/>
字符串
我想选择“全部”作为默认值在多选框中,但defaultValue选项不起作用。请让我知道这段代码有什么问题。
2条答案
按热度按时间afdcj2ne1#
看起来你的
Autocomplete
组件和你的props期望的数据类型如下,你给options
prop一个正确的类型。我认为defaultValue
也应该是相同的类型字符串
所以我认为改变默认值如下将解决这个问题。
型
zaq34kh62#
您正在使用受控输入呈现自动完成。在这种情况下,您必须在useState中设置默认值,该值控制自动完成的选定值。阅读此处的文档。这是文档中所写的内容:
defaultValue:默认值。当组件不受控制时使用。
考虑到选项
All
将始终位于列表的顶部。您可以如下初始化selectedNumbers State:字符串
你的选项数组在对象数组中,如果你习惯于将它转换为字符串数组,那么解决方案可以更简单。
型