如何使用 useEffect() 改变 React-Hook-Form 的默认值？

小能豆

如何使用 useEffect() 改变 React-Hook-Form 的默认值？

javascript

我正在创建一个页面，供用户使用 React-Hook-Form 更新个人数据。页面加载后，我将useEffect获取用户当前的个人数据并将其设置为表单的默认值。

我将获取的值放入中defaultValue。<Controller />但是，它并没有显示在文本框中。这是我的代码：

import React, {useState, useEffect, useCallback} from 'react';
import { useForm, Controller } from 'react-hook-form'
import { URL } from '../constants';

const UpdateUserData = props => {
    const [userData, setUserData] = useState(null);
    const { handleSubmit, control} = useForm({mode: 'onBlur'});

    const fetchUserData = useCallback(async account => {
        const userData = await fetch(`${URL}/user/${account}`)
                            .then(res=> res.json());
        console.log(userData);
        setUserData(userData);
    }, []);

    useEffect(() => {
        const account = localStorage.getItem('account');
        fetchUserData(account);
    }, [fetchUserData])

    const onSubmit = async (data) => {
        // TODO
    }

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div>
                    <label>User Name:</label>
                    <Controller
                        as={<input type='text' />}
                        control={control}
                        defaultValue={userData ? userData.name : ''}
                        name='name'
                    />
                </div>

                <div>
                    <label>Phone:</label>
                    <Controller
                        as={<input type='text' />}
                        control={control}
                        defaultValue={userData ? userData.phone : ''}
                        name='phone'
                    />
                </div>
                <button>Submit</button>
            </form>
        </div>
    );
}

export default UpdateUserData;

调用的API运行正常，并且值实际上已设置为userData状态。

{
  name: "John",
  phone: "02-98541566"
  ...
}

我也尝试setUserData使用模拟数据useEffect()，但还是不行。我上面的代码有问题吗？

阅读 37

2024-06-11

共1个答案

小能豆

看起来您正确地获取了用户数据并将其设置到状态中userData。但是，问题可能与您如何设置组件defaultValue中使用的表单字段的默认值有关Controller。

defaultValue组件的 prop用于Controller设置输入字段的初始值。但由于您使用的是 React Hook Form，因此您应该defaultValue仅在首次初始化表单时使用该 prop。对于后续更新，您应该改用该valueprop。

修复代码的方法如下：

import React, { useState, useEffect, useCallback } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { URL } from '../constants';

const UpdateUserData = () => {
  const [userData, setUserData] = useState(null);
  const { handleSubmit, control, setValue } = useForm({ mode: 'onBlur' });

  const fetchUserData = useCallback(async (account) => {
    const userData = await fetch(`${URL}/user/${account}`).then((res) => res.json());
    console.log(userData);
    setUserData(userData);
  }, []);

  useEffect(() => {
    const account = localStorage.getItem('account');
    fetchUserData(account);
  }, [fetchUserData]);

  useEffect(() => {
    // Set default values after userData is fetched
    if (userData) {
      setValue('name', userData.name);
      setValue('phone', userData.phone);
    }
  }, [userData, setValue]);

  const onSubmit = async (data) => {
    // Handle form submission
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <label>User Name:</label>
          <Controller
            as={<input type='text' />}
            control={control}
            name='name'
          />
        </div>

        <div>
          <label>Phone:</label>
          <Controller
            as={<input type='text' />}
            control={control}
            name='phone'
          />
        </div>
        <button type='submit'>Submit</button>
      </form>
    </div>
  );
};

export default UpdateUserData;

在此更新的代码中：

我们使用React Hook Form 中的方法来设置获取setValue表单字段后的默认值。userData
我们defaultValue从Controller组件中删除了 props，因为我们现在使用设置默认值setValue。
我们确保仅在将其作为依赖项包含setValue在内后才进行调用。userData``useEffect

这应该可以解决问题，并且您的表单字段现在应该显示从 API 获取的正确默认值。

2024-06-11