如何修复React函数组件注册时"Cannot read properties of null (reading 'protocol')"错误

错误原因 #

TypeError: Cannot read properties of null (reading 'protocol')报错的根因是调用axios.post时第一个参数传入了null，axios需要解析请求地址的协议字段时触发了空指针异常。

你的代码存在以下几处问题：

• userData状态初始化值为null，你调用的setUserData(userData)属于无意义操作，userData始终保持为null
• axios.post的标准语法是axios.post(请求地址, 请求数据, 配置项)，你把需要提交的用户数据当做第一个参数传入，不符合axios的参数要求
• 路由跳转方法调用错误，props.push不存在，react-router v5版本需要通过props.history.push触发路由跳转
• 向sessionStorage存储对象时没有转JSON字符串，会导致存储内容异常

修复步骤 #

1. 替换axios.post的第一个参数为你的后端注册接口实际地址，第二个参数传入整理好的用户提交数据
2. 移除无意义的userData状态和对应的赋值代码
3. 修正路由跳转的调用方法
4. 补充sessionStorage存储对象时的JSON序列化操作
5. 可选：给props.location.state的取值增加可选链保护，避免用户直接访问当前页面没有传参时报错

修复后的核心代码 #

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

const UserSignUpReview = (props) => {
    // 增加可选链保护，避免无参数访问时报错
    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 REGISTER_API_URL = '你的后端注册接口地址';

    const createAccount = async (e) => {
        e.preventDefault();
        try {
            // 整理提交的用户数据，不需要额外用状态存储
            const submitUserData = {
                user,
                firstName,
                lastName,
                email,
                username
            };
            const response = await axios.post(REGISTER_API_URL, submitUserData);
            console.log(response.data);
            // 存储对象需要转JSON字符串
            sessionStorage.setItem("user", JSON.stringify(response.data));
            // 修正路由跳转写法
            props.history.push({
                pathname: '/UserAccount',
                state: {
                    user: response.data,
                    firstName: firstName,
                    lastName: lastName,
                    email: email,
                    username: username,
                },
            });
        } catch (err) {
            console.log("Signup Error: ", err.toString());
        }
    }

    // return部分的原有界面代码不需要修改
    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;

内容的提问来源于stack exchange，提问作者DL89