#javascript #reactjs #react-hooks #react-hook-form
#javascript #reactjs #реагирующие крючки #форма react-hook-form #react-hooks
Вопрос:
Я использую форму 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",
},
}}
/>
Комментарии:
1. Используете ли вы Redux?
2. да, я в конечном итоге получу все данные из моего состояния redux
3. Круто, подожди, пока я отвечу
Ответ №1:
Если вы используете 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
Вы можете попробовать это и настроить несколько вещей
Комментарии:
1. но тогда почему, когда я вручную инициализировал состояние статическими данными, я не отображался во входном значении, и теперь оно будет отображаться? запутался 🙂