Как установить начальные значения в Formik, используя Ax ios с Typescript - PullRequest
Новая
       12

Как установить начальные значения в Formik, используя Ax ios с Typescript

0 голосов
/ 30 января 2020

Я новичок в использовании React, Formik и Ax ios и не знаю, как установить начальные значения формы из вызова базы данных. Я попробовал приведенный ниже фрагмент кода, но не увенчался успехом. Я не могу найти в Интернете примеры машинописи о том, как это сделать. 

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()}...

Ответы [ 2 ]

1 голос
/ 30 января 2020

Вы захотите сделать ваш сетевой запрос при монтировании (используя хук «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>;
}
0 голосов
/ 30 января 2020

Это потому, что вам не хватает зависимости в useEffect. добавьте пустой массив в качестве зависимости (второй аргумент useEffect), если вы хотите запускать только один раз, когда страница отображает 

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

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

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