0

I'm doing an app in React to help in the creation of a team for a game, a team has 7 members and each member has some characteristics than can increase the ATK or DEF of said member if said characteristic is shared with other team member. So, if two or more members of the team share "X" the effect of "X" is activated. I'm tracking all the characteristics of all characters to see which they share and for that I'm using useReducer.

const reducer = (state,action) => {
        switch(action.type){
            case 'add':{
                return [...state, { skill: action.link.skill, onPositions: action.link.onPositions, description: action.link.description}];
            }
            case 'update': {
                let index = state.findIndex((el) => el.skill === action.exist.skill);
                state = state.map((el,i)=>{
                    return i === index ? {skill: el.skill, onPositions: [...el.onPositions, action.position], description: el.description} : el
                });
                return state;
            }
            case 'reset': {
                return [];
            }
            default: return state;
        }
    }
const [ linkSkill, setLinkSkill ] = useReducer(reducer,[]);

Every time a member is added or removed I reset all the characteristics of the team to create them again, like this:

    useEffect(()=>{
        setLinkSkill({type: 'reset'});
        linksBuffs(team,setLinkSkill);
    },[team.length]);

My problem comes from linksBuffs function:

let linksBuffs = (team,callBack) => {
if(team.length > 1){ //I need 2 or more to compare
            for(let i = 0; i < team.length; i++){ // for every member of the team
                team[i].links.forEach( (elem) => { // for every characteristic
                    let exist = linkSkill.filter((link) => link.skill === elem);//I check if its already stored
                    if(!exist.length){ //if it doesnt I add it
                        callBack({type: 'add', link: {skill: elem, onPositions:[i+1], description: linksFile[`${elem}`]}});
                    }else{ //if it does I update it as a visual aid for the user so he knows which team member shares what with who
                        callBack({type: 'update', position: i+1, exist: exist[0]});
                    }
                })
            }
        }
}

Debugging I discovered that the for and forEach loops finish before the callBack (dispacth function) is even executed once and I need it to be executed when I call it so the characteristic is added to the state to later know if some other character also haves it. How do I make this work? I have been looking a lot into this but no solution. Please help :)

Eiron
  • 1
  • 1
  • The whole idea of `useReducer` is to put the logic (ie the loop) inside the reducer! Do `setLinkSkill({type: 'reset', team});` in your effect, nothing more. – Bergi Nov 14 '22 at 22:12
  • As for why this is happening, see the closely related question [The useState set method is not reflecting a change immediately](https://stackoverflow.com/q/54069253/1048572) – Bergi Nov 14 '22 at 22:15

0 Answers0