Impossible de réécrire le titre car il est déjà explicite et clair

Question

J'utilise Flashlist dans React Native et j'utilise le hook useCallback dans ma fonction renderItem Dans mon composant, j'ai un état (un tableau) appelé todos et lorsque j'enregistre todos.length Pourquoi cela se produit-il et comment puis-je y remédier ?

exporter la fonction par défaut MyComponent() {
  // Certains codes ont été omis par souci de concision.
  const [todos, setTodos] = useState([]);
  const renderItem = useCallback(
    ({ élément } : ListRenderItemInfo) =>
      
          console.log(todos.length); // Toujours enregistrer 0.
          if (todos.length >= 10) return ;
          setTodos((curr) => [item.name, ...curr]);
        }}
      >
        {item.name}
      
    ),
    []
  );

  retour (
    
      data={data?.todos comme Todo[]}
      estimateItemSize={50}
      renderItem={renderItem}
      keyExtractor={(_, idx) => idx.toString()}
    />
  );
}
Remarque : j'ai essayé de transmettre à la fois todos et todos.length mais le résultat était le même que . 
Heureux de répondre à vos questions. 
            

Answer 1

const [todos, setTodos] = useState<string[]>([]);

et

const renderItem = useCallback(
  () => {
    //todo's here is a closure, it will not update
    //a dependency of [] means, just run once.
  },
  []
);

C'est un problème courant car ce n'est pas évident. Parce que cela arrive si souvent, setStateil existe une version de rappel. Dans votre code, vous l'utilisez en fait pour définir l'état, mais vous devez également l'utiliser pour obtenir l'état actuel pour un maximum de 10 vérifications.

Une solution simple consiste donc à mettre la vérification de la longueur dans la fonction de rappel de useState.

setTodos((curr) => curr.length >= 10 ? curr : [item.name, ...curr]);

Dans le code ci-dessus, si la longueur actuelle est supérieure ou égale à 10, seul l'état actuel est renvoyé, sinon un nouvel élément est ajouté.

Une autre option, bien sûr, consiste à ajouter des tâches à l'état de useCallback, mais pourquoi cela ne fonctionne pas dans FlashList, je ne suis pas sûr.

Une meilleure option consiste à extraire Item comme autre sous-composant. Cela présente d'autres avantages, tels qu'une plus grande composabilité, un partage de code et, surtout, des performances.