Pourquoi ce statut attend-il qu'un autre statut soit mis à jour ou qu'une actualisation rapide soit effectuée ? - Réagir/NextJS

Question

EDIT : La prochaine version est la 13.3.0

J'ai un état appelé localArray et je souhaite uniquement mettre à jour vers un index spécifique, j'ai donc pensé à créer une variable de temps pour modifier ce tableau et mettre à jour l'état avec la valeur de temps, le problème est que cet état n'est pas mis à jour avant un autre l'état est mis à jour ou après un rafraîchissement rapide. Il sera mis à jour, je ne sais pas pourquoi cela se produit

Voici un exemple minimal reproductible :

import { useState } from 'react'

function Test() 
{
    const [someState, setSomeState] = useState("");
    const [localArray, setLocalArray] = useState(["","","",""])

    const handleArrayChanges = ( { target: { name, value } } ) => {
        let newArray = localArray;
        newArray[Number(name)] = value;
        setLocalArray(newArray);
    }

    return (
        <div>
            <h4>Array state</h4>
            <textarea name='0' onChange={handleArrayChanges}/>
            <p> {localArray[0]}</p>

            <h4>Some other state</h4>
            <button onClick={() => {setSomeState("a")}}>Update some other state</button>
        </div>
      )
}

export default Test

Comme vous pouvez le voir, une fois l'état du tableau mis à jour, le premier élément devrait apparaître dans le paragraphe, mais ce n'est pas le cas tant que le cas cis n'est pas expliqué

Answer 1

React repose sur l'hypothèse que l'état est immuable. Vous modifiez un tableau existant, sans en créer un nouveau, donc après avoir défini l'état, React compare les états avant et après, constate qu'il s'agit du même tableau et pense donc que rien n'a changé. Il ne sera donc pas restitué.

Au lieu de cela, créez une copie du tableau et modifiez-la :

const handleArrayChanges = ({ target: { name, value } }) => {
  let newArray = [...localArray]; // <--- creating a shallow copy
  newArray[Number(name)] = value;
  setLocalArray(newArray);
};