如何处理来自 axiosResponse 的数据以显示在 MUI 卡上？

Question

axiosResponse 到 MUI 卡的数据

你好。我正在从事一个小型大学项目，该项目要求我创建一个 Formik 表单，在该表单中我将获得一个水果名称，然后将其用于从某个 API (https://www.fruityvice. com/api) 使用 axios.get。我需要在提交我的 Formik 表单时发生这种情况，并返回一个包含有关水果名称和营养信息的信息的某种对象，因为我需要在主页上使用 MUI 卡显示这些数据——这应该由应用程序处理。 .js 文件。问题是，我无法让它工作并且一直在努力处理我从 API 获得的数据。我真的不知道该怎么办了。我的代码：

import React, { useState } from 'react';
import { Formik, Form, Field, useFormik } from 'formik';
// import axios from 'axios';
import * as yup from "yup";
import { useTranslation } from 'react-i18next';
import { Button, Card, CardContent, TextField, Typography } from '@mui/material';

const API_URL = 'https://www.fruityvice.com/api';
const axios = require('axios');

function FormikMaterialUI({ fruits, totalWeight, setFruits, setTotalWeight }) {
    const { t } = useTranslation();

    const formik = useFormik({
        initialValues: {
            fruitName: '',
            fruitWeight: 0,
        },
        validationSchema: yup.object({
            fruitName: yup.string()
                .max(100, t('invalidName'))
                .required(t('requiredField')),
            fruitWeight: yup.number()
                .min(1, t('invalidWeight')),
        }),

        onSubmit: (values) => {
            const weight = values.fruitWeight;
            const fruit = values.fruitName;
            if (totalWeight + weight <= 400) {
                fetchFruitData(fruit)
                    .then((newFruit) => {
                        setFruits([...fruits, newFruit]);
                        setTotalWeight(totalWeight + weight);
                        formik.resetForm();
                    })
                    .catch((error) => {
                        console.error(error);
                    });
            }
        }
    });

    const fetchFruitData = async (fruit) => {
        try {
            const response = await axios.get(`${API_URL}/fruit/${fruit}`);
            const { name, nutritions } = response.data;
            const newFruit = { name, nutritions };
            return newFruit;
        } catch (error) {
            console.error(error);
            throw error;
        }
    };

    return (
        <div>
            <form onSubmit={formik.handleSubmit}>
                <div style={{ display: "grid", gridTemplateColumns: "repeat(1, 2fr)", gridGap: "16px" }}>
                    <TextField
                        id="fruitName"
                        name="fruitName"
                        label={t('fruitName')}
                        type="text"
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        value={formik.values.fruitName}
                        error={formik.touched.fruitName && Boolean(formik.errors.fruitName)}
                        helperText={formik.touched.fruitName && formik.errors.fruitName}
                        style={{ margin: "8px 16px", backgroundColor: "peachpuff" }}
                    />
                    <TextField
                        id="fruitWeight"
                        name="fruitWeight"
                        label={t('weightGrams')}
                        type="number"
                        onChange={formik.handleChange}
                        onBlur={formik.handleBlur}
                        value={formik.values.fruitWeight}
                        error={formik.touched.fruitWeight && Boolean(formik.errors.fruitWeight)}
                        helperText={formik.touched.fruitWeight && formik.errors.fruitWeight}
                        style={{ margin: "8px 16px", backgroundColor: "peachpuff" }}
                    />
                </div>
                <div style={{ display: "flex", justifyContent: "center" }}>
                    <Button type="submit" variant="contained" style={{ margin: "0 auto", backgroundColor: "green" }}>
                        {t('addFruit')}
                    </Button>
                </div>
            </form>
            <p>{totalWeight}</p>
        </div>
    );
}

export default FormikMaterialUI;