从控制器中的表单中选择不起作用

Question

I have a Form, I use React toolkit, but I have a problem, all my fields are updated when I change them it works correctly for me, with Https PUT, but when I have a select, it doesn't change it for me.

For the selected data I made a call to the API for the entity I wanted, and I displayed them in the dropbox.

    const dispatch = useDispatch();
    const categories = useSelector(selectCategories);
    const status = useSelector(selectStatus);
    const priority = useSelector(selectPriority);
    const methods = useFormContext();
    const { control, formState } = methods;
    const { errors } = formState;
    const [selectedCategory, setSelectedCategory] = useState('all');
    const [selectedStatus, setSelectedStatus] = useState('all');
    const [selectedPriority, setSelectedPriority] = useState('all');

This is for set

    function handleSelectedStatus(event) {
    setSelectedStatus(event.target.value);
}

And here is Controller

    <Controller
            name="status.id"
            control={control}
            defaultValue={[]}
            value={selectedStatus}
            onChange={handleSelectedStatus}
            render={({ field }) => (
                <Select
                    value={selectedStatus}
                    onChange={handleSelectedStatus}
                    multiline
                    rows={5}
                    className="mt-8 mb-16 w-1/2"
                >
                    {status.map(categ => {
                        if (categ.id === field.value) {
                            return (
                                <MenuItem value="all">
                                    <em value={field.value}>{field.value} </em>
                                </MenuItem>
                            );
                        }
                    })}
                    {status.map(category => (
                        <MenuItem value={category.name} key={category.id}>
                            {category.name}
                        </MenuItem>
                    ))}
                </Select>
            )}
        />

Maybe someone else will consume it and this question will be useful

Answer 1

Using Select.Option should work instead of using MenuItem.

 <Select
            value={selectedStatus}
            onChange={handleSelectedStatus}
            multiline
            rows={5}
            className="mt-8 mb-16 w-1/2"
        >
            {status.map(categ => {
                if (categ.id === field.value) {
                    return (
                        <Select.Option value={field.value}>
                            {field.value}
                        </Select.Option>
                    );
                }
            })}
        </Select>