AutoComplete(MUI)我试图从API的复选框中设置默认值，但获得(中间值).过滤器不是一个函数错误

Question

这是我的代码，我需要得到一个默认值从API内的复选框最初，我使用Material-UI自动完成组件，虽然它有defaultValue prop，即使尝试后得到了相同的错误。但是我可以获得API数据作为列出的选项。

import React from "react"
import Checkbox from "@material-ui/core/Checkbox"
import { Grid } from "@material-ui/core"
import TextField from "@material-ui/core/TextField"
import { useForm, Controller } from "react-hook-form"
import Autocomplete from "@material-ui/lab/Autocomplete"
import CheckBoxOutlineBlankIcon from "@material-ui/icons/CheckBoxOutlineBlank"
import CheckBoxIcon from "@material-ui/icons/CheckBox"
const icon = <CheckBoxOutlineBlankIcon fontSize="small" />
const checkedIcon = <CheckBoxIcon fontSize="small" />
export default function StoreFilter({ data, onStoreChange }) {
// data is the state passed from my parent component
// data contains the API response
const [defaultStore, setDefaultStore] = React.useState("")
React.useEffect(() => {
setTimeout(() => {
if (data.length > 0) {
setDefaultStore(data[0].name)
}
}, 2000)
}, [data])
return (
<>
<Grid container style={{ justifyContent: "flex-end" }}>
<Grid item style={{ marginTop: "15px", marginBottom: "20px" }}>
<Autocomplete
multiple
id="checkboxes-tags-demo"
onChange={(event, value) => {
onStoreChange(value)
setDefaultStore(null)
}}
options={data}
disableCloseOnSelect
getOptionLabel={(option) => option.name}
getOptionSelected={(option, value) => option.name === value.name}
defaultValue={defaultStore}
renderOption={(option, { selected }) => (
<React.Fragment>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.name}
</React.Fragment>
)}
style={{ width: 550 }}
renderInput={(params) => (
<TextField
{...params}
variant="outlined"
label="Stores"
placeholder="More..."
/>
)}
/>
</Grid>
</Grid>
</>
)
}

我的目标是在复选框中获得默认值。

我得到这个错误，甚至当defaultValue Props从AutoComplete

TypeError: (intermediate value)(intermediate value)(中间值)(中间值)。Filter不是一个函数

Answer 1

您需要在Array状态下使用array.Filter:

setDefaultStore(ArrayData.filter(data => data.id === idYourFinding))