reactjs - react-hook-form 和 useState (切换)

Question

我有以下用例:

用户想要切换配置文件是否处于事件状态。

配置:Next.js,动物区系数据库， react 钩子(Hook)形式

我使用 useState 来更改切换的状态，并使用 react-hook-forms 将其他值发送到我的 Fauna 数据库和切换的状态。我希望切换具有来自数据库的状态，当用户切换它并按下提交按钮时，我想更改数据库中的状态。

当我切换它时，我似乎无法将正确的状态发送回数据库。

主要组件:

export default function Component() {
 const [status, setStatus] = useState(
    userData?.profileStatus ? userData.profileStatus : false
  );

const defaultValues = {
    profileStatus: status ? userData?.profileStatus : false
  };

const { register, handleSubmit } = useForm({ defaultValues });

  const handleUpdateUser = async (data) => {

    const {
      profileStatus
    } = data;
    try {
      await fetch('/api/updateProfile', {
        method: 'PUT',
        body: JSON.stringify({
          profileStatus
        }),
        headers: {
          'Content-Type': 'application/json'
        }
      });
      alert(`submitted data: ${JSON.stringify(data)}`);
    } catch (err) {
      console.error(err);
    }
  };

return (
  <div>
    <form onSubmit={handleSubmit(handleUpdateUser)}>
      <Toggle status={status} setStatus={setStatus} />
      <button type="submit">
        Save
      </button>
    </form>
  </div>
 )
}

切换组件:

import { Switch } from '@headlessui/react';

function classNames(...classes) {
  return classes.filter(Boolean).join(' ');
}

export default function Toggle({status , setStatus}) {

  return (
    <Switch.Group as="div" className="flex items-center justify-between">
      <span className="flex-grow flex flex-col">
        <Switch.Label
          as="span"
          className="text-sm font-medium text-gray-900"
          passive
        >
          Profilstatus
        </Switch.Label>
        <Switch.Description as="span" className="text-sm text-gray-500 w-44">
          Her sætter du om din profil skal være aktiv eller inaktiv.
        </Switch.Description>
      </span>
      <Switch
        checked={status}
        onChange={setStatus}
        className={classNames(
          status ? 'bg-blue-600' : 'bg-gray-200',
          'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500'
        )}
      >
        <span
          aria-hidden="true"
          className={classNames(
            status ? 'translate-x-5' : 'translate-x-0',
            'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200'
          )}
        />
      </Switch>
    </Switch.Group>
  );
}

updateProfile.js

import { updateProfileInfo } from '@/utils/Fauna';
import { getSession } from 'next-auth/react';

export default async (req, res) => {
  const session = await getSession({ req });
  if (!session) return res.status(401);

  const userId = session.user.id;
  if (req.method !== 'PUT') {
    return res.status(405).json({ msg: 'Method not allowed' });
  }

  const {
    profileStatus,
    image,
    about,
    preferences,
    socialmedia
   } = req.body;
  try {
    const updated = await updateProfileInfo(
      userId,
      profileStatus,
      image,
      about,
      preferences,
      socialmedia
    );
    return res.status(200).json(updated);
  } catch (err) {
    console.error(err);
    res.status(500).json({ msg: 'Something went wrong.' });
  }
  res.end();
};

Fauna.js

const updateProfileInfo = async (
  userId,
  profileStatus,
  image,
  about,
  preferences,
  socialmedia
) => {
  return await faunaClient.query(
    q.Update(q.Ref(q.Collection('users'), userId), {
      data: {
        profileStatus,
        image,
        about,
        preferences,
        socialmedia
      }
    })
  );
};

module.exports = {
  updateProfileInfo

}

你们能看出我做错了什么吗？

Answer 1

我制作了一个小沙盒来演示如何使用 react-hook-form 来实现您的用例。 .

它不起作用的原因是，您从未更新 react-hook-form切换开关时的内部状态，您只需更新您的 useState .所以当你调用handleUpdateUser作为参数传递的数据是您通过 defaultValues 设置的初始数据.

其实不用useState在这里，你可以使用 react-hook-form的内部表单状态。为此，您必须使用 <Controller />组件 react-hook-form提供为 <Switch />来自 Headless UI 的组件 @headlessui/react是一个不暴露 ref 的外部控制组件实际 <input /> 的 Prop 元素(<Switch /> 使用 <button /> 而不是 <input /> 元素)。您可以找到更多信息here .

这样你也可以让你的<Toggle />通过提供 value 更通用的重用和 onChange Prop 而不是status和 setStatus .当然，您也可以使用这些名称。 <Controller />将提供 value和 onChange支持field我在 <Toggle /> 上传播的对象组件。

在您的示例中，不清楚您的 <Component />组件将收到初始 userData .我假设你会提出一个 api 请求，所以我把它放在 useEffect 中.要在 api 调用完成后更新表单状态，您必须使用 reset方法react-hook-form提供。如果只渲染 <Component />当userData已加载，您可以省略此步骤，只需将结果传递给 defaultValues至useForm .

我用一个简单的 Promise 模拟了 api 调用，但你应该明白了。

Component.js

import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import Toggle from "./Toggle";

// Server Mock
let databaseState = {
  profileStatus: true
};

const getUserData = () => Promise.resolve(databaseState);
const updateUserData = (newState) => {
  databaseState = newState;

  return Promise.resolve(newState);
};

function Component() {
  const { control, reset, handleSubmit } = useForm({
    defaultValues: { profileStatus: false }
  });

  useEffect(() => {
    const loadData = async () => {
      const result = await getUserData();

      reset(result);
    };

    loadData();
  }, [reset]);

  const handleUpdateUser = async (data) => {
    try {
      const result = await updateUserData(data);

      console.log(result);
    } catch (err) {
      console.error(err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit(handleUpdateUser)}>
        <Controller
          control={control}
          name="profileStatus"
          render={({ field: { ref, ...field } }) => <Toggle {...field} />}
        />
        <button type="submit">Save</button>
      </form>
    </div>
  );
}

Toggle.js

import { Switch } from "@headlessui/react";

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

export default function Toggle({ value, onChange }) {
  return (
    <Switch.Group as="div" className="flex items-center justify-between">
      <span className="flex-grow flex flex-col">
        <Switch.Label
          as="span"
          className="text-sm font-medium text-gray-900"
          passive
        >
          Profilstatus
        </Switch.Label>
        <Switch.Description as="span" className="text-sm text-gray-500 w-44">
          Her sætter du om din profil skal være aktiv eller inaktiv.
        </Switch.Description>
      </span>
      <Switch
        checked={value}
        onChange={onChange}
        className={classNames(
          value ? "bg-blue-600" : "bg-gray-200",
          "relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
        )}
      >
        <span
          aria-hidden="true"
          className={classNames(
            value ? "translate-x-5" : "translate-x-0",
            "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
          )}
        />
      </Switch>
    </Switch.Group>
  );
}