javascript - 如何修复 React（功能组件）中的错误。“注册错误：TypeError：无法读取 null 的属性（读取'协议'）”

Question

我和我的队友构建了这个多步骤的注册表单，用户输入的所有数据都显示在最后。用户单击提交按钮创建用户帐户后，我收到错误，注册错误：TypeError：无法在控制台上读取 null 的属性（读取“协议”）。我怎样才能解决这个问题？这是我下面的代码。

import React from 'react';
import axios from 'axios';

const UserSignUpReview = (props) => {
    const [userData, setUserData] = React.useState(null);
    const user = props.location.state.user;
    const firstName = props.location.state.firstName;
    const lastName = props.location.state.lastName;
    const email = props.location.state.email;
    const username = props.location.state.username;
    console.log(props);
    console.log(user);
    console.log(username);

    const createAccount = async (e) => {
        e.preventDefault();
        try {
            setUserData(userData)
            const response = await axios.post(userData) 
            console.log(response.data)
            sessionStorage.setItem("user", response.data);
            props.push({
                pathname: '/UserAccount',
                state: {
                    user: response.data,
                    firstName: firstName,
                    lastName: lastName,
                    email: email,
                    username: username,
                },
            });
        } catch (err) {
            console.log("Signup Error: ", err.toString());
        }

    } 

    return (
        <div>
            <h1>Sign Up</h1>

            <p>
                Create your account, and with a just a few easy steps you can save a
                horse a today.
            </p>

            <img src='' alt='' />

            <h2>Contact Info</h2>

            <div className='review-content'>
                <p>First Name: {firstName}</p>
            </div>

            <div className='review-content'>
                <p>Last Name: {lastName}</p>
            </div>

            <div className='review-content'>
                <p>Email: {email}</p>
            </div>

            <div className='review-content'>
                <p>Username: {username}</p>
            </div>

            <div className='review-content'>
                <p>Primary Phone Number: {user.primaryPhone}</p>
            </div>

            {user?.secondaryPhone && (
                <div className='review-content'>
                    <p>Secondary Phone Number: {user.secondaryPhone}</p>
                </div>
            )}
            <div className='review-content'>
                <p>Address: {user.address}</p>
            </div>

            <div className='review-content'>
                {user?.addressTwo && <p>Address #2: {user.addressTwo}</p>}
            </div>

            <div className='review-content'>
                <p>City: {user.city}</p>
            </div>

            <div className='review-content'>
                <p>State: {user.state}</p>
            </div>

            <div className='review-content'>
                <p>Zip Code: {user.zipCode}</p>
            </div>

            <h2>Details</h2>

            <div className='review-content'>
                <p>About you: {user.questionnaire[0].aboutYou}</p>
            </div>

            <div className='review-content'>
                <p>
                    Previous experience with horses: {user.questionnaire[0].previousExperienceWithHorses}
                </p>
            </div>

            <div className='review-content'>
                <p>Children at Home: {user.questionnaire[0].childrenAtHome}</p>
            </div>

            <div className='review-content'>
                <p>Pets at home: {user.questionnaire[0].otherPetsAtHome}</p>
            </div>

            <h2>Documents</h2>

            <p>Attached Forms: {user.docUpload[0].photoID}</p>

            <img src='' alt='' />

            <button type='submit'
                        onClick={createAccount}>Submit</button>
        </div>
    );
};

export default UserSignUpReview;

标签： javascriptreactjs

Answer 1

当前，您仅调用setUserData(userData)该createAccount方法，这意味着您将其设置为默认值null.

这意味着您将null作为第一个参数发送axios.post。Axios 要求您将 url 作为第一个参数包含在内，axios.post()否则它将抛出一个协议区域。