如何使用带有 React Hooks 的 axios POST 请求？

Question

这是我的注册组件

const SignupComponent = () => {
    const [values, setValues] = useState({
        username: 'silvio1',
        name: 'Silvioo',
        email: 'berlusconi@gmail.com',
        password: '123ooo007',
    });
    const [loading, setLoading] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();

        const { username, name, email, password } = values;
        const user = {username, name, email, password};

        await axios.post('${API)/signup', user);        
    };

    const handleChange = name => e => {
        setValues({ ...values, [name]: e.target.value });
    };

    const showLoading = () => (loading ? <div className="alert alert-info">Loading...</div> : '');

    const signupForm = () => {
        return (
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <input
                        value={values.username}
                        onChange={handleChange('username')}
                        type="text"
                        className="form-control"
                        placeholder="Type your username"
                    />
                </div>

                <div className="form-group">
                    <input
                        value={values.name}
                        onChange={handleChange('name')}
                        type="text"
                        className="form-control"
                        placeholder="Type your name"
                    />
                </div>

                <div className="form-group">
                    <input
                        value={values.email}
                        onChange={handleChange('email')}
                        type="email"
                        className="form-control"
                        placeholder="Type your email"
                    />
                </div>

                <div className="form-group">
                    <input
                        value={values.password}
                        onChange={handleChange('password')}
                        type="password"
                        className="form-control"
                        placeholder="Type your password"
                    />
                </div>

                <div>
                    <button className="btn btn-primary">Signup</button>
                </div>
            </form>
        );
    };

    return <React.Fragment>
        {showLoading()}
        {signupForm()} 
         </React.Fragment>;
};

export default SignupComponent;

编辑我改变了我的代码（zhulien 接受的答案）。出现注册页面，我尝试注册用户。我有错误

Unhandled Runtime Error
Error: Request failed with status code 404

Call Stack
createError
node_modules/axios/lib/core/createError.js (16:0)
settle
node_modules/axios/lib/core/settle.js (17:0)
XMLHttpRequest.handleLoad
node_modules/axios/lib/adapters/xhr.js (62:0)

前端文件夹

components
config.js
next.config.js
node_modules
package.json
package-lock.json
pages

我的页面文件夹

_document.js
index.js
signin.js
signup.js

signup.js 导入上面的代码

import Link from 'next/link';
import Layout from '../components/Layout';
import SignupComponent from '../components/frontauth/SignupComponent';

const Signup = () => {
    return (
        <Layout>
            <h2>Signup page</h2>
            <SignupComponent />
        </Layout>
    );
};

我的 next.config.js

{
  APP_NAME: 'BLOG FRONTEND',
  APP_DEVELOPMENT: 'http://localhost:3000',
  PRODUCTION: false
}

和 config.js

const { publicRuntimeConfig } = getConfig();

console.log(publicRuntimeConfig);
export const API = publicRuntimeConfig.PRODUCTION
    ? 'https://cryptoblog.com'
    : 'http://localhost:3000';
export const APP_NAME = publicRuntimeConfig.APP_NAME;

我是 React 和 React Hooks 的新手。如何解决这个问题呢？

Answer 1

首先，您试图访问{username}（不存在）而不是values.username. 此外，不要在事件处理程序中使用钩子，它们应该只在组件的顶级主体或自定义钩子中使用。看看这个：React hooks rules。

所以：

1. 在您的表单中，您必须使用 state( values) 属性。
2. 提取useEffect组件主体流中的钩子，或者更好地将其完全删除，因为您当前没有正确使用它。你最好只使用表单提交的简单事件处理程序，它应该在某处发布数据而不设置任何状态。

您的代码可能类似于：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { API } from '../../config';

const SignupComponent = () => {
    const [values, setValues] = useState({
        username: 'silvio1',
        name: 'Silvioo',
        email: 'berlusconi@gmail.com',
        password: '123ooo007',
    });

    const [loading, setLoading] = useState(false);

    const handleSubmit = async (e) => {
        e.preventDefault();

        const { username, name, email, password } = values;
        const user = {username, name, email, password};

        await axios.post('${API)/signup', user);        
    };

    const handleChange = name => e => {
        setValues({ ...values, [name]: e.target.value });
    };

    const showLoading = () => (loading ? <div className="alert alert-info">Loading...</div> : '');

    const signupForm = () => {
        return (
            <form onSubmit={handleSubmit}>
                <div className="form-group">
                    <input
                        value={values.username}
                        onChange={handleChange('username')}
                        type="text"
                        className="form-control"
                        placeholder="Type your username"
                    />
                </div>