检索输入收音机的数据不会进行默认选择

Question

目标：
通过 API 检索数据 'smartphones'，并将其应用为 React 挂钩表单的输入单选组件中的默认选择。

问题：
使智能手机成为输入单选按钮中的预选的代码不起作用。
但是，如果我使用硬编码进行更改，它可以工作，但硬编码不能解决问题。

不知道怎么解决

信息：
*使用 React TS 和 React hook 形式。
*React TS 和 hook 形式的新手。

堆栈闪电战：
https://stackblitz.com/edit/react-ts-z9cnzl

谢谢！

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import './style.css';

type FormValues = {
  lastName: string;
  favShow: string;
};

export default function App() {
  const [category, setCategory] = useState('');

  React.useEffect(() => {
    async function FetchData() {
      var data = await fetch('https://dummyjson.com/products/1').then((res) => {
        return res.json();
      });

      console.log(data.category);
      setCategory(data.category);
    }

    FetchData();
  }, []);

  const [data, setData] = useState(null);
  const { register, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      lastName: 'asaaaaaaf',
      favShow: category,
      //favShow: 'smartphones',
    },
  });

  const onSubmit = (data) => {
    setData(data);

    console.log('asdf');
  };

  return (
    <React.Fragment>
      <form onSubmit={handleSubmit(onSubmit)} className="form-container">
        <h1 className="form-heading">React Hook Form Example</h1>
        <input
          {...register('lastName', { required: true })}
          className="form-control"
          type="text"
          placeholder="Last name"
          maxLength={15}
          name="lastName"
        />

        <br />
        <br />

        <label htmlFor="ted-lasso">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="smartphones"
            id="smartphones"
          />{' '}
          smartphones
        </label>

        <label htmlFor="got">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="GOT"
            id="got"
          />
          GOT
        </label>

        <br />
        <br />

        <button className="submit-btn" type="submit">
          Submit
        </button>
      </form>

      {data && <p className="submit-result">{JSON.stringify(data)}</p>}
    </React.Fragment>
  );
}

Answer 1

我得到了一些帮助，解决方案是：

堆栈闪电战： https://stackblitz.com/edit/react-ts-m2s6ev?file=index.tsx

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import './style.css';

type FormValues = {
  lastName: string;
  favShow: string;
};

export default function App() {
  const [category2, setCategory2] = useState();
  const [data, setData] = useState(null);
  const { register, handleSubmit, resetField } = useForm<FormValues>({
    defaultValues: {
      lastName: '',
      favShow: '',
    },
  });

  React.useEffect(() => {
    async function FetchData() {
      var data = await fetch('https://dummyjson.com/products/1').then((res) => {
        return res.json();
      });

      setCategory2(data);
    }

    FetchData();
  }, []);

  React.useEffect(() => {
    if (category2) {
      const obj = JSON.parse(JSON.stringify(category2));

      console.log(obj);

      resetField('lastName', { defaultValue: obj.discountPercentage });
      resetField('favShow', { defaultValue: obj.category });
    }
  }, [resetField, category2]);

  const onSubmit = (data) => {
    setData(data);
  };

  return (
    <React.Fragment>
      <form onSubmit={handleSubmit(onSubmit)} className="form-container">
        <h1 className="form-heading">React Hook Form Example</h1>
        <input
          {...register('lastName', { required: true })}
          className="form-control"
          type="text"
          placeholder="Last name"
          maxLength={15}
          name="lastName"
        />

        <br />
        <br />

        <label htmlFor="ted-lasso">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="smartphones"
            id="smartphones"
          />{' '}
          smartphones
        </label>

        <label htmlFor="got">
          <input
            {...register('favShow', { required: true })}
            type="radio"
            name="favShow"
            value="GOT"
            id="got"
          />
          GOT
        </label>

        <br />
        <br />

        <button className="submit-btn" type="submit">
          Submit
        </button>
      </form>

      {data && <p className="submit-result">{JSON.stringify(data)}</p>}
    </React.Fragment>
  );
}

检索输入收音机的数据不会进行默认选择

Retriving data for input radio won't make a default selection

react-hooks

react-hook-form

react-tsx