同じアイコンを2回クリックすると切り替えられない

Question

ユーザーが選択できるアイコンは3つあり、複数のアイコンを選択できますが、同じアイコンをクリックするとトグルする必要があります。私はFacebookのアイコンとツイッターのアイコンをクリックすると両方のアイコンが強調表示されるはずですが、FacebookやTwitterのアイコンをもう一度クリックすると強調表示されません。強調表示は機能していますが、2回クリックしても強調表示は削除されません。

は、ここに私のコード

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の第2引数である必要があります。あなたは要素である最初のものを使用しています。