时间戳

首页 > 解决方案 > 如何使用带有 Typescript 的 Axios 将初始值设置为 Formik

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

问题描述

我是使用 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()}...

标签： reactjsaxiosformik

解决方案

您需要在挂载时发出网络请求（在本例中使用“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>;
}

推荐阅读