使用Semantic UI React如何获取图标值、修改值并切换图标颜色

问题原因 #

• 你直接修改了Redux返回的state引用（包括selectedProd和products数组），属于状态突变，不会触发组件重渲染，所以isFavorite的变化视图没有响应
• Semantic UI的Icon组件本身通过切换star outline和star类就能实现空心/实心效果，不需要额外写基础样式逻辑
• i标签没有原生onChange事件，不需要写这个属性
• 你写的样式三元表达式语法错误，正确格式应该是style={{color: isFavorite ? 'red' : 'white'}}

修改后的代码 #

1. component.js #

import { useDispatch } from 'react-redux' // 别忘了引入hooks

const ProductDetails = () => {
    const {productId} = useParams()
    const dispatch = useDispatch()
    const products = useSelector((state) => state.allProducts.products)
    const selectedProd = products.find(product => product.id === parseInt(productId))
    
    // 加边界判断避免商品不存在时报错
    if (!selectedProd) return <div>商品加载中/不存在</div>
    const {isFavorite} = selectedProd 
   
    const handleFavoriteSelect = () => {
        // 生成新的商品对象，不修改原state引用
        const updatedProd = {
            ...selectedProd,
            isFavorite: !isFavorite
        }
        dispatch(updateProducts(products, updatedProd))            
    }

    return(
        <i 
            onClick={handleFavoriteSelect} 
            // 动态切换类实现空心/实心效果，也可以自定义颜色
            className={`right floated star icon ${isFavorite ? '' : 'outline'}`}
            style={{color: isFavorite ? 'red' : 'white'}}
        />
    )
}

2. redux/action.js #

export const updateProducts = (products, product) => {
    const indexOfItem = products.findIndex(q => q.id === product.id);
    if (indexOfItem > -1) {
        // 生成新数组，不修改原state的数组引用
        return {
            type: ActionTypes.SET_PRODUCTS,
            payload: [
                ...products.slice(0, indexOfItem),
                product,
                ...products.slice(indexOfItem + 1)
            ]
        };
    }
    // 未找到对应商品时返回原数组，不修改状态
    return {
        type: ActionTypes.SET_PRODUCTS,
        payload: products
    };
};

3. 额外注意 #

如果你的商品数据首次存入Redux时没有isFavorite字段，需要在初始化商品列表的逻辑里给每个商品增加默认值isFavorite: false，避免第一次取值为undefined导致切换异常。

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