javascript - 如何在 Next.js 中从 Formik Submit 返回 API（获取的）数据

问题描述

我是新的@frontend，发现创建一个简单的搜索表单有点挑战性Next.js，使用Formik并返回从我自己的 API 获取的数据返回页面。由于没有太多相关信息，或者没有，但它没有涵盖整个过程，所以我决定创建这个问题。

我在处理什么：

在 express 上分离基于前端和后端的 API（现在都在 localhost 上）
React (+ dom) & Next.js
React Material-UI
福米克

建筑学：

前端发送请求（基于表单输入）-> 服务器接收到它（对其进行操作）并以json对象响应-> 前端接收它，并将结果显示在页面上。

后端（启用正确的 CORS）

一个简单的 node.js 快速服务器，当您请求它时，它具有单路由 (localhost:port/users/:id)，就像./users/100它json以 {id}+1 增量返回一样{id:101}，如下面的示例代码：

var express = require('express');
var router = express.Router();

/* CORS ARE FINE */
router.get('/:id', function(req, res) {
  res.json({id: parseInt(req.params.id)+1});
});

module.exports = router;

前端（next.js + formik）

我已经编写了MyForm组件并将其插入到我的主页上。这是MyForm组件的代码：

import React from 'react';
import fetch from 'isomorphic-unfetch'
import { Formik, Form, Field } from 'formik';
import { TextField } from 'formik-material-ui';
import Button from "@material-ui/core/Button";

const MyForm = () => (
    <Formik
        initialValues={{ text: '', password: '' }}
        onSubmit={ async (values, { setSubmitting }) => {
            const res = await fetch(`http://localhost:8000/users/${values.text}`, {
                method: 'GET',
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin': '*'
                }}).then(response => response.json());
            console.log(res);
            //props = res;
            //return props;
            setTimeout(() => {
                alert(JSON.stringify(res, null, 2));
                setSubmitting(false);
            }, 400);
        }}
    >
        {({ isSubmitting }) => (
            <Form>
                <Field
                    name="text"
                    label="Text"
                    type="text"
                    variant="outlined"
                    component={TextField}
                />
                <Button
                    type="submit"
                    variant="contained"
                    color="primary"
                    disabled={isSubmitting}
                >
                    Submit
                </Button>
            </Form>
        )}
    </Formik>
);

export default MyForm

就目前而言，myForm 工作正常，通过提交表单从 API 接收到必要的数据。结果存储为res变量并在页面上显示为弹出窗口。

但我想看看它，回到页面上。像这样：

网络上没有太多教程逐步介绍此过程。我知道Next.js 在通过getInitialProps. （但没有表单提交的例子）

我将组件放在页面上：

export default function Index() {
  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Form />
        <Here is an element with search form results />
      </Box>
    </Container>
  );
}

然后我读到我无法将子组件的道具返回给父组件。或者我可以吗？我也不能将res变量作为组件值放置在表单内部或外部：

那我现在应该怎么办？Formik无论如何，我在教程中没有找到任何相关的例子。我知道它以某种方式与state类似操作相关联componentDiDMount，这就是为什么前端开发人员使用Redux. 但是有人可以解释一下，我做错了什么吗？

另外，如果您有任何相关信息并想给我一些建议或分享（例如 Formik 在这种情况下没用，您应该X改用）不要害羞，只需发布即可。我会检查并投票。

根据@Shyam 的回答，我更新了我的代码。就目前而言，表单具有以下代码：

const MyForm = (props) => (
    <Formik>
    ...
            onSubmit={ async (values, { setSubmitting }) => {
            const res = await fetch(`http://localhost:8000/users/${values.text}`, {
                method: 'GET',
                mode: 'cors',
                headers: {
                    'Content-Type': 'application/json',
                    'Access-Control-Allow-Origin': '*'
                }}).then(response => response.json());
            console.log(res);
            setSubmitting(false);
            props.myCallbackFunction(res);
        }}
    ...

并index.js根据以下建议，

在这种情况下React，返回一个错误，连接props但表单提交工作正常。猜猜我可以在这里找到相关信息：

https://reacttricks.com/sharing-global-data-in-next-with-custom-app-and-usecontext-hook/

标签： javascriptreactjsnext.jsformik

export default function Index() { const [result, setResult] = useState(null) const callMeOnRes = (data) => { setResult(data) } return ( <Container maxWidth="sm"> <Box my={4}> <Form myCallbackFunction={(res) => callMeOnRes(res)} /> {result && <div>{result}</div>} <Here is an element with search form results /> </Box> </Container> ); }

javascript - 如何在 Next.js 中从 Formik Submit 返回 API（获取的）数据

问题描述

解决方案

推荐阅读