1

我正在使用反应钩子表单，并且我正在尝试设置通过映射数组并输出表单中的输入来输出的表单的默认值。我已将数组简化为这样的对象{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]);

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

表单.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;
4

1 回答 1

2

您可以将表单提取到它自己的组件中，并且仅在获取数据时才呈现它。这样，当您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])
于 2021-02-27T17:28:54.673 回答