React中Cannot read properties of null错误：异步数据赋值问题求解

错误根源 #

1. 初始值为空导致的报错：你的useFetch钩子初始data是null，组件首次渲染时story就是null，此时访问story['mData']['mMessage']必然会触发Cannot read properties of null错误。
2. useState初始值不会自动更新：useState的初始值仅在组件第一次渲染时计算，就算后续异步请求完成、story拿到数据，currentStory也不会自动同步更新。

具体修复步骤 #

1. 修正currentStory的初始化与更新逻辑 #

把currentStory的初始值设为空字符串，再通过useEffect监听story的变化，当数据返回后再更新状态：

function EditStory() {
    const { id } = useParams();
    const navigate = useNavigate();
    const { data: story } = useFetch(apiUrl + id);
    // 初始值设为空字符串，避免渲染时报错
    const [currentStory, setStory] = useState('');

    // 监听story变化，数据返回后同步到currentStory
    useEffect(() => {
        // 用可选链避免嵌套属性不存在的报错
        if (story?.mData?.mMessage) {
            setStory(story.mData.mMessage);
        }
    }, [story]);

    function handleEdit(){
        // PUT请求逻辑
    }

    return (
        <>
            <H1> Edit Story {id} </H1>
            <form onSubmit={handleEdit}>
                <Input type='text'
                    value={currentStory}
                    onChange={(e) => setStory(e.target.value)}/>
                <Button type='submit' value='Submit'> Update </Button>
                <CancelButton type='reset' value='Reset' onClick={() => navigate(-1)}> Cancel </CancelButton>
            </form>
        </>
    )
}

2. 给useFetch添加加载/错误状态（推荐） #

在请求钩子中加入加载状态和错误状态，提升用户体验的同时方便排查问题：

function useFetch(url) {
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true); // 新增加载状态
    const [error, setError] = useState(null); // 新增错误状态

    useEffect(() => {
        setLoading(true);
        fetch(url)
            .then(response => {
                // 检查请求是否成功
                if (!response.ok) throw new Error(`请求失败：${response.status}`);
                return response.json();
            })
            .then(data => {
                setData(data);
                setError(null);
            })
            .catch(error => {
                console.log(error);
                setError(error.message);
            })
            .finally(() => {
                setLoading(false); // 请求结束后关闭加载状态
            });
    }, [url]);

    return { data, loading, error };
}

然后在组件中使用这些状态：

function EditStory() {
    const { id } = useParams();
    const navigate = useNavigate();
    const { data: story, loading, error } = useFetch(apiUrl + id);
    const [currentStory, setStory] = useState('');

    useEffect(() => {
        if (story?.mData?.mMessage) {
            setStory(story.mData.mMessage);
        }
    }, [story]);

    // 加载中提示
    if (loading) return <div>加载中...</div>;
    // 请求错误提示
    if (error) return <div>出错了：{error}</div>;

    function handleEdit(){
        // PUT请求逻辑
    }

    return (
        <>
            <H1> Edit Story {id} </H1>
            <form onSubmit={handleEdit}>
                <Input type='text'
                    value={currentStory}
                    onChange={(e) => setStory(e.target.value)}/>
                <Button type='submit' value='Submit'> Update </Button>
                <CancelButton type='reset' value='Reset' onClick={() => navigate(-1)}> Cancel </CancelButton>
            </form>
        </>
    )
}

3. 关键细节：空值保护 #

始终使用可选链操作符?.访问嵌套属性（如story?.mData?.mMessage），就算某个层级的属性为null/undefined，也不会触发报错，只会返回undefined。

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