useEffect does not recognize new value

Asked

Viewed 173 times

0

The useEffect hook fires when some variable in your array refreshes. However, when the value of the variable remains the same, the hook simply ignores.

This hook gets a value and a push on the array in useState.

useEffect(() => {
  setDataUser(dataUser => [...dataUser, afterAttackUser]);
}, [afterAttackUser]);

But if the value of afterAttackUser is 4, for example, and receiving 4 again, it’s as if the value of the variable did not change, so useEffect does not fire.. But I need to put this value inside the array... Any light to proceed? I created some logics but unsuccessfully.

Edit: Well I want to render the values of the array in a map that will resume a Text.

entire component:

export default function CombatLog() {
  const afterAttackUser = useSelector(state => state.combatReducer.afterAttack);
  const currentEnemyLife = useSelector(state => state.currentEnemyInfoReducer.currentLife);
  const maxEnemyLife = useSelector(state => state.currentEnemyInfoReducer.maxLife);

  const [dataUser, setDataUser] = useState(Array);
  
  useEffect(() => {
    setDataUser(dataUser => [...dataUser, afterAttackUser]);
    console.log(`tamanho do array: ${dataUser.length}`);
  }, [afterAttackUser]);

  return(
    <ImageBackground style={styles.container} resizeMode='stretch' source={Img}>
      <Text style={styles.title}>Registro do Combate</Text>
      <View>
        {
          dataUser.map((damage, index) => {      
            if(damage != 1)
              return <Text style={styles.textUser} key={index}>Você infligiu {damage} de dano</Text>
          })
        }
      </View>
    </ImageBackground>
  );
}
javascript react react-native react-hooks

  • you have how to put where you update, only useEffect I can’t tell why this, I mean, put the whole component !

  • explain also the desired functioning in your question speaks speaks and does not explain (understand we want to reach the same point but, lack information)

  • was bad, I just updated brother

  • Friend, following the variable is a certain Contextapi or Redux: it only suffers change upon some event, Cade the event, the function something like that? doesn’t update at all.

  • It’s in another file, and it’s shooting great. the problem is that the useEffect does not fire when the value of the variable remains the same, I just need a logic to get past that. I’ve tried countless times..

  • 1

    So, how this useEffect works as you mentioned, will only run when the value is changed what you intend to do maybe the solution is another (almost sure)

  • 1

    You cannot update at Redux/context level even?

Show 2 more comments

1 answer

0


You can try to return an object where one of the properties would be the afterAttack and another one with random value as identification that changes with each update of afterAttack.

That way, even if afterAttack return the same value, the useEffect will be executed with change of random property.

Something like:

export default function CombatLog() {
  /* No seu reducer, adicione um valor randômico em `afterAttackId` para cada atualização de `afterAttack` */
  const { afterAttack, afterAttackId } = useSelector(state => state.combatReducer);
  const currentEnemyLife = useSelector(state => state.currentEnemyInfoReducer.currentLife);
  const maxEnemyLife = useSelector(state => state.currentEnemyInfoReducer.maxLife);

  const [dataUser, setDataUser] = useState(Array);
  
  useEffect(() => {
    setDataUser(dataUser => [...dataUser, afterAttack]);
    console.log(`tamanho do array: ${dataUser.length}`);
  /* use `afterAttackId` para identificar a mudança` */
  }, [afterAttackId]);

  return(
    <ImageBackground style={styles.container} resizeMode='stretch' source={Img}>
      <Text style={styles.title}>Registro do Combate</Text>
      <View>
        {
          dataUser.map((damage, index) => {      
            if(damage != 1)
              return <Text style={styles.textUser} key={index}>Você infligiu {damage} de dano</Text>
          })
        }
      </View>
    </ImageBackground>
  );
}

Try it on there

Browser other questions tagged javascript react react-native react-hooks

You are not signed in. Login or sign up in order to post.