Le titre réécrit est : La mise à jour initiale de l'état React ne se produit pas

Question

J'ai un composant de téléchargement d'images où l'utilisateur peut télécharger une ou plusieurs images à la fois. J'essaie toujours d'utiliser useState() pour mettre à jour l'état lorsque l'utilisateur télécharge une image. Mais le statut n’a pas été mis à jour immédiatement. Comment puis-je mettre à jour le code suivant pour qu'il fonctionne correctement.

import React from 'react';
import './style.css';
import React, { useState } from 'react';

export default function App() {
  const [file, setFile] = useState([]);

  const uploadImages = (event) => {
    console.log('NewFile=>', event.target.files);

    setFile([...file, ...event.target.files]);
    console.log('UpdatedFiles=>', file);
  };
  return (
    <div>
      <input
        multiple
        type="file"
        name="photo"
        id="photo"
        accept="image/*"
        capture="environment"
        onChange={(event) => uploadImages(event)}
      />
    </div>
  );
}

https://stackblitz.com/edit/react-ujcbjh?file=src%2FApp.js

Answer 1

Vous devez être prudent chaque fois que vous utilisez useState avec des types non primitifs.

Ces deux pages de la documentation React vous donneront quelques instructions :

• https://react.dev/learn/updating-objects-in-state
• https://react.dev/learn/updating-arrays-in-state

En bref, React utilise Object.is 来确定在调用 setState pour déterminer si l'état a changé. Pour les objets et les tableaux, cela peut renvoyer vrai même si leur contenu change.

Answer 2

Dans React, le hook useState ne met pas à jour l'état immédiatement. Les mises à jour de statut sont asynchrones, ce qui signifie que la valeur de statut mise à jour peut ne pas être disponible immédiatement après l'appel de la fonction de définition de statut.

Pour résoudre ce problème, vous pouvez utiliser le hook useEffect pour écouter les changements dans l'état du fichier et effectuer toutes les actions nécessaires lors de la mise à jour. Voici une version mise à jour du code qui inclut le hook useEffect :

import React, { useState, useEffect } from 'react';
import './style.css';

export default function App() {
  const [file, setFile] = useState([]);

  const uploadImages = (event) => {
    console.log('NewFile=>', event.target.files);
    setFile([...file, ...event.target.files]);
  };

  useEffect(() => {
    console.log('UpdatedFiles=>', file);
  }, [file]);

  return (
    <div>
      <input
        multiple
        type="file"
        name="photo"
        id="photo"
        accept="image/*"
        capture="environment"
        onChange={(event) => uploadImages(event)}
      />
    </div>
  );
}

Dans ce code mis à jour, nous avons ajouté un hook useEffect qui écoute les changements dans l'état du fichier en spécifiant file comme dépendance dans le deuxième tableau de paramètres du hook useEffect. Chaque fois que l'état du fichier est mis à jour, le code contenu dans la fonction de rappel useEffect est exécuté. Vous pouvez effectuer toutes les opérations nécessaires en utilisant les valeurs de fichier mises à jour dans le hook useEffect.

En utilisant le hook useEffect, vous devriez voir la valeur d'état mise à jour être correctement enregistrée après la mise à jour de l'état.