當單擊兩次相同的圖標時無法切換

Question

我有3個圖標，用戶可以選擇它們並可以選擇多個圖標，但如果單擊相同的圖標，它應該切換。我的意思是，當我點擊Facebook圖標和Twitter圖標時，兩個圖標都應該突出顯示，但如果我再次單擊Facebook或Twitter圖標，則不應突出顯示。突出顯示正在工作，但點擊兩次並不能消除突出顯示。

這裏是我的代碼

const socialPlatforms = [ 
{ name: 'facebook', fontName: 'facebook-square', icon: 'facebook-icon' }, 
{ name: 'twitter', fontName: 'twitter-square', icon: 'twitter-icon' }, 
{ name: 'instagram', fontName: 'instagram', icon: 'instagram-icon' }, 
]; 

addPlatform = (platform) => { 
this.props.selectPlatform(platform); 
}; 


render() { 
const { settings } = this.props; 
console.log('settings', settings.platforms); 
const socialPlatform = socialPlatforms.map((platform, index) => 
    <FontAwesome 
    name={platform.fontName} 
    key={index} 
    className={`icon-pointer font-awesome-icons ${settings.platforms.indexOf(platform.name) === -1 ? '' : platform.icon}`} 
    size="5x" 
    onClick={() => { this.addPlatform(platform.name); }} 
    /> 
); 


export const addPlatform = (platform) => ({ 
    type: ADD_PLATFORM, 
    platform, 
}); 

const initialState = { 
loading: false, 
platforms: [], 
}; 

export default(state = initialState, action) => { 
switch (action.type) { 
    case ADD_PLATFORM: { 
    let index = state.platforms.indexOf(action.platform); 
    if (index === -1) { 
     return { 
     ...state, 
     platforms: [...state.platforms, action.platform], 
     }; 
    } 
    return { 
     ...state, 
     platforms: state.platforms.filter((localIndex) => localIndex !== index), 
    }; 
    } 
    default: 
    return state; 
} 
}; 

我已經使用過濾器用於切換和它不工作。

Answer 1

localIndex應該是filter callback的第二個參數。你正在使用第一個元素。