如何使用带有React Hooks的axios来发布请求？

理查德·鲁布列夫（Richard Rublev）

这是我的Signupcomponent

const SignupComponent = () => {
    const [values, setValues] = useState({
        username: 'silvio1',
        name: 'Silvioo',
        email: '[email protected]',
        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的新手。如何解决这个问题呢？

朱莲

首先，您要尝试访问{username}（不存在）而不是state属性（即）values.username。此外，不要在事件处理程序中使用钩子，它们应该在组件的顶层主体中或仅在自定义钩子中使用。签出此：React钩子规则。

所以：

在您的表单中，您必须使用state（values）属性。
提取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: '[email protected]',
        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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。