React组件未挂载状态更新警告、属性读取错误及setReviews失效求助

问题1：组件未挂载时更新状态的警告 #

直接在组件函数体中发起axios请求属于副作用操作，每次组件渲染都会重复执行请求，且异步回调更新状态时可能组件还未完成挂载，触发警告。必须将这类副作用放到useEffect钩子中控制执行时机。

问题2：无法读取undefined的'review'属性错误 #

初始状态reviews是空数组，此时reviews.length为0，计算出的随机索引j对应的reviews[j]是undefined，直接访问.review自然报错。同时因为请求是异步的，组件首次渲染时reviews还没拿到接口返回的数据，必须处理异步加载的状态。

修复后的代码 #

import React, { useState, useEffect } from "react";
import axios from "axios";

function GetRandomReview(props) {
    const [reviews, setReviews] = useState([]);
    const [loading, setLoading] = useState(true);

    // 把接口请求放到useEffect，空依赖数组确保只在组件挂载时执行一次
    useEffect(() => {
        axios.get("http://localhost:7000/reviews")
            .then((response) => {
                setReviews(response.data);
                setLoading(false);
            })
            .catch(err => {
                console.error('获取评论失败:', err);
                setLoading(false);
            });
    }, []);

    // 加载状态下显示占位内容
    if (loading) {
        return <div className={props.active ? "carousel-item container-fluid active" : "carousel-item container-fluid"}>加载中...</div>;
    }

    // 确保reviews有数据时再生成随机索引
    const j = Math.floor(Math.random() * reviews.length);

    return (
        <div className={props.active ? "carousel-item container-fluid active" : "carousel-item container-fluid"}>
            <h2 className="testimonial-text">
                {reviews[j].review}
            </h2>
            <em>
                {reviews[j].name}
            </em>
        </div>
    )
}

export default GetRandomReview;

关键修改点 #

• 引入useEffect，将axios请求移入其中，依赖项设为空数组[]，确保请求只在组件挂载时执行一次，解决重复请求和状态更新时机问题。
• 添加loading状态标记，处理异步请求完成前的加载状态，避免在数据未返回时访问空数组的元素。
• 只在loading为false（即数据已获取）时生成随机索引并渲染内容，彻底解决undefined报错问题。

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