defaultValue Ввода не работает правильно на дизайн муравья

Question

Я использую Ant Design в своем проекте. Я получаю данные из избыточного хранилища с помощью useEffect следующим образом:

const settingsRedux = useSelector(state => state.SETTINGS)

, после чего я использую эти данные для defaultValue Input

<Input 
  defaultValue={settingsRedux.background_image} 
  onChange={e => dispatch({
    type: BACKGROUND_IMAGE, 
    payload: e.target.value
  })}
/>

Это работает на самом деле. Но выдает консольную ошибку.

Warning: [antd: Form.Item] `defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.

Answer 1

Вы можете использовать value prop вместо defaultValue. Значение по умолчанию используется, когда вы хотите установить начальное значение в неуправляемом входе. В настоящее время вы настроили свой компонент, так что вам, возможно, придется использовать значение prop.

Подробнее об этом здесь: https://reactjs.org/docs/forms.html#controlled -компоненты

Answer 2

Вы можете установить initialValues ​​в компоненте Form как объект.

<Form
  ...
  initialValues={{
    ["name"]: settingsRedux.background_image 
  }}
>
 ...

<Input 
  name="name"
  onChange={e => dispatch({
    type: BACKGROUND_IMAGE, 
    payload: e.target.value
  })}
/>

оформить заказ здесь: https://ant.design/components/form/

Answer 3

Глядя на ваш код, я предполагаю, что вы не используете форму Ant Design.

Поскольку это контролируемое поле, вам нужно использовать значение prop вместо defaultValue prop. Если вы видите пустое поле, ваше начальное состояние приставки для SETTINGS может быть пустой '' строкой.

Установите начальное значение ваших настроек в приставке на соответствующее значение.