Chào mọi người, em muốn tạo auto generate select, mỗi select có nhiều options, nhưng các options của mỗi select này là không giống nhau do người dùng tự config và cũng ko biết trước được số lượng select sẽ được tạo. Các options này được đẩy vào 1 state object, gọi là allSelectOptions. Tạo thêm một state nữa để chứa giá trị được chọn của tất cả các select, gọi là allSelectedSelectOptions cũng có kiểu là object gồm nhiều cặp key: string, value: optionType.
Options của các select được load bằng useEffect khi tạo component, sẽ gọi một api để get các options lên và đưa vào allSelectOptions theo code của từng loại. Thế thì lúc này allSelectedSelectOptions vẫn là {}.
Em mô tả lại quá trình làm các select thì khi render lên bị lỗi như tiêu đề do lúc đầu khai báo value: là undefined.
Cho em hỏi có cách nào sửa lỗi này trong trường hợp của em không hoặc có cách khác ổn hơn không ạ, em cảm ơn mọi người.
getValues.map((item: any) => {
<Autocomplete
disablePortal
fullWidth
value={allSelectedSelectOptions[item?.configId]}
onChange={(event, value) => {
setAllSelectOptions((prevState: any) => ({
...prevState,
[item?.configId]: value?.id
}))
}}
clearIcon={null}
options={allSelectOptions[item?.configId] || []}
getOptionLabel={(option) => option.id}
renderInput={(params) => (
<TextField
{...params}
size="small"
label="Nhãn"
/>
)}
/>
})