React警告：渲染时更新组件问题求解（附代码）

问题根源 #

这个警告的核心原因是在React状态更新的回调函数里调用了会触发其他组件状态更新的操作。具体来说，你在setIsFavorited的更新器回调中调用了props.addToFavorite()/props.deleteFromFavorite()，这两个函数会触发toast组件的状态更新——而toast的容器组件（也就是警告里的Q）此时正处于ProductCard的渲染流程中，React不允许在一个组件渲染时更新另一个组件的状态，所以抛出了这个警告。

另外你的代码还有个隐性问题：Shop组件里的favorited直接从localStorage读取，没有用React状态管理，当某个ProductCard修改localStorage后，其他卡片的isFavorited属性不会同步更新。

解决方案 #

把触发toast的操作从状态更新回调中移出，同时将收藏状态的管理逻辑上提到父组件Shop，遵循React单向数据流原则，具体步骤如下：

1. 父组件用useState管理收藏状态，从localStorage初始化数据
2. 父组件实现添加/取消收藏的完整逻辑（包括更新localStorage、触发toast）
3. 子组件只负责展示状态和触发父组件的操作函数

修改后的完整代码 #

Shop 组件

import { useState, useEffect } from 'react';
import { ProductCard } from './ProductCard';
import { ToastContainer, toast, Bounce } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export const Shop = () => {
    // 用useState管理收藏ID数组
    const [favorited, setFavorited] = useState<number[]>([]);

    // 初始化：从localStorage读取已收藏数据
    useEffect(() => {
        const savedFavorites = localStorage.getItem("favorited");
        if (savedFavorites) {
            setFavorited(JSON.parse(savedFavorites));
        }
    }, []);

    // 添加收藏逻辑
    const addToFavorite = (id: number) => {
        const updatedFavorites = [...favorited, id];
        setFavorited(updatedFavorites);
        localStorage.setItem('favorited', JSON.stringify(updatedFavorites));
        toast.success('Item added to favorite!', {
            position: "top-center",
            autoClose: 1000,
            hideProgressBar: true,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "light",
            transition: Bounce,
        });
    };

    // 取消收藏逻辑
    const deleteFromFavorite = (id: number) => {
        const updatedFavorites = favorited.filter(itemId => itemId !== id);
        setFavorited(updatedFavorites);
        localStorage.setItem('favorited', JSON.stringify(updatedFavorites));
        toast.info('Item removed from favorite!', {
            position: "top-center",
            autoClose: 1000,
            hideProgressBar: true,
            closeOnClick: true,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
            theme: "light",
            transition: Bounce,
        });
    };

    // 统一处理收藏切换
    const toggleFavorite = (id: number) => {
        favorited.includes(id) ? deleteFromFavorite(id) : addToFavorite(id);
    };

    return (
        <div className='shop-wrapper'>
            <div className="container">
                <div className="product-cards">
                    {productData.map(el => (
                        <ProductCard
                            key={el.id}
                            isFavorited={favorited.includes(el.id)}
                            toggleFavorite={() => toggleFavorite(el.id)}
                            {...el}
                        />
                    ))}
                    <ToastContainer />
                </div>
            </div>
        </div>
    )
}

ProductCard 组件

import { useState, useEffect } from 'react';

type Props = {
    id: number;
    name: string;
    price: number;
    category: string;
    img: string;
    isFavorited: boolean;
    toggleFavorite: () => void;
}

export const ProductCard = (props: Props) => {
    // 子组件内部维护收藏状态，同步父组件传入的值
    const [isFavorited, setIsFavorited] = useState(props.isFavorited);

    // 当父组件的isFavorited变化时，同步更新子组件状态
    useEffect(() => {
        setIsFavorited(props.isFavorited);
    }, [props.isFavorited]);

    return (
        <div className='product-card'>
            <div className="like">
                <img
                    onClick={props.toggleFavorite}
                    height={32}
                    width={32}
                    src={isFavorited ? "images/heart-like.svg" : "images/heart-unlike.svg"}
                    alt="Like"
                />
            </div>
            <img src={props.img} alt="Product image" />
            <h3>{props.name}</h3>
            <div className='bottom-card'>
                <p>{props.category}</p>
                <p>${props.price}</p>
            </div>
        </div>
    )
}

关键修改说明 #

• 状态上提：把收藏状态和业务逻辑都放在父组件，子组件只做UI展示和触发操作，符合React单向数据流，避免状态不一致问题
• 避免渲染时更新其他组件：toast触发操作不再放在setState的回调里，而是直接在状态更新后执行，不会干扰组件渲染流程
• 状态同步：子组件用useEffect监听父组件传递的isFavorited，确保所有卡片的收藏状态实时同步
• 简化子组件逻辑：子组件无需处理localStorage和toast，代码更简洁易维护

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