React hooks 形式，从简化的数组中设置默认值不会填充，但手动输入相同的对象会

Question

我正在使用 React Hooks 表单，我正在尝试设置一个表单的默认值，该表单通过映射数组并输出表单中的输入来输出。我已将数组缩减为这样的对象 {name0:"fijs",name1:"3838"...} ，如果我手动将其传递到默认值中，它会映射到我的输入并填充它们。但是，如果我从执行 reduce 函数的变量中输入它们，它不会填充它。我认为这是因为在第一次渲染时它是未定义的。我试过使用 useEffect，但没有用，所以我被卡住了。

这是我正在处理的代码部分

const test = formState?.reduce((obj, item, idx) => {
    return { ...obj, [`${item.name}${idx}`]: "fdsjfs" };
  }, {});

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

  console.log(test);

这就是全部

import { useQuery, gql, useMutation } from "@apollo/client";
import { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import { useForm } from "react-hook-form";

const INPUT_VALUES = gql`
  query GetInputValues {
    allFormInputVals {
      data {
        name
        _id
        type
      }
    }
  }
`;

const ADD_INPUT_VALUES = gql`
  mutation AddInputValues(
    $name: String!
    $type: String!
    $index: Int!
    $ID: ID!
  ) {
    createFormInputVal(
      data: {
        name: $name
        type: $type
        index: $index
        formRoot: { connect: $ID }
      }
    ) {
      name
    }
  }
`;

const Home = () => {
  const blankFormInput = {
    __typename: "FormInputVal",
    name: "test",
    _id: uuidv4(),
    type: "text",
  };
  const [formState, setFormState] = useState([blankFormInput]);
  const [formStateVals, setFormStateVals] = useState(undefined);

  const { loading, error, data } = useQuery(INPUT_VALUES);

  const [createFormInputVal, { data: createInputData }] = useMutation(
    ADD_INPUT_VALUES
  );

  useEffect(() => {
    setFormState(data?.allFormInputVals?.data);
  }, [data]);

  const test = formState?.reduce((obj, item, idx) => {
    return { ...obj, [`${item.name}${idx}`]: "fdsjfs" };
  }, {});

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

  console.log(test);

  const onSubmit = (data) => console.log(data);
  console.log(errors);

  const addInput = async () => {
    const blanktext = {
      __typename: "FormInputVal",
      name: "Product Image",
      _id: uuidv4(),
      type: "text",
    };
    setFormState([...formState, { ...blanktext }]);
    console.log(formState);
    const res = await createFormInputVal({
      variables: {
        name: "test",
        type: "text",
        index: 0,
        ID: "291541554941657608",
      },
    }).catch(console.error);
    console.log(res);
  };

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error: {error.message}</p>;

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input type="button" value="Add Form Input" onClick={addInput} />
        {formState?.map((val, idx) => {
          const nameId = `name${idx}`;
          const typeId = `type-${idx}`;
          return (
            <div key={val._id}>
              {val.type === "text" && (
                <>
                  <label htmlFor={nameId}>{`${val.name} #${idx + 1}`}</label>

                  <input
                    type="text"
                    name={nameId}
                    id={nameId}
                    className={val.type}
                    ref={register()}
                  />
                  {/* <label htmlFor={typeId}>{`Type #${idx + 1}`}</label>

                  <select name={typeId} id={typeId} className={val.type}>
                    {data.allFormInputVals.data.map((item) => {
                      return (
                        <option key={item._id} value={item.type}>
                          {item.type}
                        </option>
                      );
                    })}
                  </select> */}
                </>
              )}
            </div>
          );
        })}
        <button type="submit">Save Form</button>
      </form>
    </>
  );
};

export default Home;

更新：我已经尝试使用 api 重置的 useEffect，我认为这是解决方案，但仍然没有成功。

const { register, handleSubmit, errors, reset } = useForm();

useEffect(() => {
    const result = test; // result: { firstName: 'test', lastName: 'test2' }
    reset(result); // asynchronously reset your form values
  }, [reset]);

更新：我将表单抽象为它自己的组件，但它仍然不起作用。

Form.js

import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { useQuery, gql, useMutation } from "@apollo/client";
import { v4 as uuidv4 } from "uuid";

const ADD_INPUT_VALUES = gql`
  mutation AddInputValues(
    $name: String!
    $type: String!
    $index: Int!
    $ID: ID!
  ) {
    createFormInputVal(
      data: {
        name: $name
        type: $type
        index: $index
        formRoot: { connect: $ID }
      }
    ) {
      name
    }
  }
`;

export default function Form({ formState, setFormState }) {
  const test = formState?.reduce((obj, item, idx) => {
    return { ...obj, [`${item.name}${idx}`]: "fdsjfs" };
  }, {});

  console.log(test);

  const { register, handleSubmit, errors } = useForm({ defaultValues: test });
  const [formStateVals, setFormStateVals] = useState(undefined);

  // console.log(test);

  const onSubmit = (data) => console.log(data);
  console.log(errors);

  const addInput = async () => {
    const blanktext = {
      __typename: "FormInputVal",
      name: "Product Image",
      _id: uuidv4(),
      type: "text",
    };
    setFormState([...formState, { ...blanktext }]);
    console.log(formState);
    const res = await createFormInputVal({
      variables: {
        name: "test",
        type: "text",
        index: 0,
        ID: "291541554941657608",
      },
    }).catch(console.error);
    console.log(res);
  };

  const [createFormInputVal, { data: createInputData }] = useMutation(
    ADD_INPUT_VALUES
  );

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="button" value="Add Form Input" onClick={addInput} />
      {formState?.map((val, idx) => {
        const nameId = `name${idx}`;
        const typeId = `type-${idx}`;
        return (
          <div key={val._id}>
            {val.type === "text" && (
              <>
                <label htmlFor={nameId}>{`${val.name} #${idx + 1}`}</label>

                <input
                  type="text"
                  name={nameId}
                  id={nameId}
                  className={val.type}
                  ref={register()}
                />
                {/* <label htmlFor={typeId}>{`Type #${idx + 1}`}</label>

                  <select name={typeId} id={typeId} className={val.type}>
                    {data.allFormInputVals.data.map((item) => {
                      return (
                        <option key={item._id} value={item.type}>
                          {item.type}
                        </option>
                      );
                    })}
                  </select> */}
              </>
            )}
          </div>
        );
      })}
      <button type="submit">Save Form</button>
    </form>
  );
}

index.js

import { useQuery, gql, useMutation } from "@apollo/client";
import { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid";
import Form from "../components/Form";

const INPUT_VALUES = gql`
  query GetInputValues {
    allFormInputVals {
      data {
        name
        _id
        type
      }
    }
  }
`;

const Home = () => {
  const blankFormInput = {
    __typename: "FormInputVal",
    name: "test",
    _id: uuidv4(),
    type: "text",
  };
  const [formState, setFormState] = useState([blankFormInput]);

  const { loading, error, data } = useQuery(INPUT_VALUES);

  useEffect(() => {
    const formData = data?.allFormInputVals?.data;
    setFormState(formData);
  }, [data]);

  if (loading) return <p>Loading...</p>;

  if (error) return <p>Error: {error.message}</p>;

  return (
    <>
      <Form formState={formState} setFormState={setFormState} />
    </>
  );
};

export default Home;

Answer 1

您可以将表单提取到它自己的组件中，并且仅在获取数据时呈现它。这样，当您在子组件中使用 useForm 时，默认值将被正确设置。

const Home = () => {
  const { loading, error, data } = useQuery(INPUT_VALUES)
  const blankFormInput = {
    __typename: "FormInputVal",
    name: "test",
    _id: uuidv4(),
    type: "text",
  }
  const [formState, setFormState] = useState([blankFormInput])

  // other code

  if (loading) {
    return <p>Loading...</p>
  }

  return <MyForm defaultValues={formState} />
}

如果您不想更改结构，可以在数据准备好后使用 setValue 设置输入值。

useEffect(() => {
  const formData = data?.allFormInputVals?.data
  setFormState(formData)

  formData?.forEach((item, idx) => {
    setValue(`${item.name}${idx}`, 'whatever')
  })
}, [data])

React hooks 形式，从简化的数组中设置默认值不会填充，但手动输入相同的对象会

React hooks form, setting default values from a reduced array doesn't populate, but manually enterring same object does

javascript

reduce

state

reactjs

react-forms