如何使用带有 Typescript 的 Axios 为 Formik 设置初始值

Question

我刚开始使用 React、Formik 和 Axios，不确定如何通过数据库调用设置表单的初始值。我试过下面的代码片段，但没有成功。我无法在网上找到任何有关如何执行此操作的打字稿示例。

async function getInitialValues() {
      try {
            const response = await axios.get('http://localhost:53132/api/test');
            //console.log(response);


            return {
                Division_Id: response.Divison_Id,
                Year: response.Year,
                Cost: response.Cost
            }

            //console.log(InitialValues);

            //return InitialValues;


          } catch (error) {
            console.error(error);
          }
    }


<Formik initialValues={getInitialValues()}...

Answer 1

您需要在挂载时发出网络请求（在此示例中使用 "useEffect" 挂钩）。然后将这些值保存到状态（在这里使用 useState 挂钩，但您可以使用 Redux 或您正在使用的任何状态管理工具）。

function NewForm() {
  const [initialValues, setInitialValues] = useState();

  useEffect(() => {
    getInitialValues().then(res => setInitialValues(res);
  }, []);

  return initialValues ? 
    <Formik initialValues={initialValues}>content</Formik> :
    <span>loading...</span>;
}

Answer 2

那是因为您缺少 useEffect 中的依赖项。添加一个空数组作为依赖项（useEffect 的第二个参数）如果你只想运行一次，当页面呈现

   function NewForm() {
      const [initialValues, setInitialValues] = useState();

      useEffect(() => {
        getInitialValues().then(res => setInitialValues(res);
      }, []);

      return initialValues ? 
        <Formik initialValues={initialValues}>content</Formik> :
        <span>loading...</span>;
    }

如何使用带有 Typescript 的 Axios 为 Formik 设置初始值

How to Set Initial Values to Formik using Axios with Typescript

reactjs

axios

formik