Реагировать | Муравей дизайн выбрать значение не настройка

Question

Я пытаюсь добавить Select All / Unselect All, чтобы отреагировать на компонент 'SELECT' Antt.

Мой код

const models = ['A4', 'A6', 'A8', 'A1', 'Q3', 'Q5'];
const [selected, setSelected] = useState({
  models: [],
});

console.log('selected', selected);

const handleModelSelect = (option) => {
  if (option === 'all') {
    if (selected.models.length === models.length) {
      setSelected((prev) => ({ ...prev, models: [] }));
    } else {
      setSelected((prev) => ({ ...prev, models }));
    }
  } else {
    setSelected((prev) => ({ ...prev, models: uniq([...prev.models, option]) }));
  }
};

return
(<Form>
  <Form.Item
    name="model"
    style={{ display: 'inline-block', width: 'calc(33% - 8px)' }}
  >
    <Select mode="multiple" placeholder="Models" value={selected.models} onSelect={handleModelSelect}>
      <Option value="all">Select all</Option>
      {map(models, model => <Option value={model} key={model}>{model}</Option>)}
    </Select>
  </Form.Item>
</Form>)

Я вижу, что все выбрано и не выбрано в «selected.models», однако проблема в том, что компонент Select визуально НЕ обновляет себя, то есть он остается с вещами, которые я выбрал / не выбрал.

Действительно странное поведение.

Answer 1

Проблема была связана с использованием Antd Form & Form.item вместе с Select . Код прекрасно работает без формы

Answer 2

Поскольку переменная models не изменяется. Вы можете применить следующие два изменения:

Один

const models = ['A4', 'A6', 'A8', 'A1', 'Q3', 'Q5'];
const [selected, setSelected] = useState({
  // Initial state
  models,
});

Два

// Get models from `selected`
{map(selected.models, model => <Option value={model} key={model}>{model}</Option>)}