Блог

Я использую форму React Hook, поэтому меня беспокоит, как мне установить данные в поля ввода в формах react hooks на данный момент для публикации данных, на которые похожа моя структура

 <form onSubmit={handleSubmit(onSubmit)}>
            <IonItem>
              <IonLabel position="stacked">Full Name</IonLabel>
             

              <Controller
                render={({ onChange, onBlur, value }) => (
                  <IonInput
                   
                    onIonChange={onChange}
                  />
                )}
                control={control}
                name="email"
                defaultValue={state.name}
                value={state.name}
                rules={{
                  required: true,
                  pattern: {
                    value: /^[A-Z0-9._% -] @[A-Z0-9.-] .[A-Z]{2,4}$/i,
                    message: "invalid email address",
                  },
                }}
              />
              {_.get("email.type", errors) === "pattern" amp;amp; (
                <p className="errorWarning">CHeck email</p>
              )}
            </IonItem>
</form>
  

но что, если бы мне пришлось использовать то же самое и установить его значение на то, что я получаю из своего api?

Для проверки purposr я попытался инициализировать свое состояние с некоторым значением, таким как

состояние:{имя:’yourname’}

но затем, когда я пытаюсь установить это значение в форме, используя defaultValue props и value props , ни один из них не работает, даже если console.log(state.name ) дает мне ‘ваше полное имя’

  <Controller
                render={({ onChange, onBlur, value }) => (
                  <IonInput
                   
                    onIonChange={onChange}
                  />
                )}
                control={control}
                name="email"
                defaultValue={state.name}
                value={state.name}
                rules={{
                  required: true,
                  pattern: {
                    value: /^[A-Z0-9._% -] @[A-Z0-9.-] .[A-Z]{2,4}$/i,
                    message: "invalid email address",
                  },
                }}
              />
  

Если вы используете redux, после сопоставления данных вашего API из состояния в реквизит в вашем компоненте.

При монтировании компонента вам необходимо получить необходимые данные с помощью useEffect hook, в той же функции проверьте, доступен ли prop (данные), если он есть, затем используйте setState или аналогичный, чтобы установить данные вашего API на данные в состоянии уровня вашего компонента. Проверяя, доступен ли prop и есть ли данные, вы можете быть уверены, что нужные вам данные возвращаются, прежде чем пытаться использовать их в своей форме.

Затем вы можете передать данные из своего состояния в значение вашей формы или значение по умолчанию.

 const [values, setvalues] = useState({
  name: ''
})

 useEffect(() => {
    async function loadData() {
      await apRequest()
    }
    loadData()
  }, [])

useEffect(() => {
  if(apiData) {
    setValues({
      name: apiData.name,
    })
  }
}, [apiData])

<form onSubmit={handleSubmit(onSubmit)}>
            <IonItem>
              <IonLabel position="stacked">Full Name</IonLabel>
             

              <Controller
                render={({ onChange, onBlur, value }) => (
                  <IonInput
                   
                    onIonChange={onChange}
                  />
                )}
                control={control}
                name="email"
                defaultValue={values.name}
                value={values.name}
                rules={{
                  required: true,
                  pattern: {
                    value: /^[A-Z0-9._% -] @[A-Z0-9.-] .[A-Z]{2,4}$/i,
                    message: "invalid email address",
                  },
                }}
              />
              {_.get("email.type", errors) === "pattern" amp;amp; (
                <p className="errorWarning">CHeck email</p>
              )}
            </IonItem>
</form>  

Помните, что вы получаете apiRequest() и apiData из props

Вы можете попробовать это и настроить несколько вещей