React Ant Design defaultValue из состояния не работает

Question

Я следую дизайну Ant для реакции официальные документы где они жестко запрограммировали значение по умолчанию во встроенном элементе select:

defaultValue={['a10', 'c12']}

Я пытаюсь использовать то же самое значение из состояния реакции, и оно вообще не отображается. Если я использую value вместо defaultValue, тогда он (то же значение из состояния) отображается, но он не редактируется, поэтому использование value не является вариантом.

Так что в основном я должен использовать defaultValue как показано в документации, но я полностью удивлен, что он вообще не отображается. Однако, если я жестко закодирую те же самые данные ['a10', 'c12'], все будет нормально! В чем тут загвоздка? Кто-нибудь сталкивался с такой проблемой?

Смотрите скриншоты ниже. Спасибо.

Снимок экрана 1. значения жестко запрограммированы в состоянии, и он работает, поля выбора заполнены

Снимок экрана 2. попытался использовать useEffect для обновления состояния (в конечном итоге эти данные будут поступать из API ) вместо жесткого кодирования, но он не отображается в полях выбора. но вы можете видеть, что в JSON.stringify() есть значение в состоянии

Снимок экрана 3. Вот как я использовал defaultValue, как показано в документах

Answer 1

useEffect обычно запускается после монтирования / обновления компонента. defaultValue используется только при первоначальной визуализации компонента. Следовательно, в вашем случае 1, где состояние жестко закодировано, значение появилось, так как значение по умолчанию было предоставлено во время первоначального рендеринга ввода (выбора).

В случае, когда состояние обновляется в useEffect , состояние не будет отражаться, потому что начальный рендеринг ввода уже выполнен, и значение defaultValue не будет использоваться здесь после для указанного c ввода. Если вам нужно состояние для управления значением ввода (select), попробуйте передать value на Input вместо defaultValue. Это делает компонент управляемым.