Der umgeschriebene Titel lautet: Die erste Aktualisierung des React-Status findet nicht statt

Question

Ich habe eine Bild-Upload-Komponente, mit der der Benutzer ein oder mehrere Bilder gleichzeitig hochladen kann. Ich versuche immer, useState() zu verwenden, um den Status zu aktualisieren, wenn der Benutzer ein Bild hochlädt. Der Status wurde jedoch nicht sofort aktualisiert. Wie kann ich den folgenden Code aktualisieren, damit er ordnungsgemäß funktioniert?

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

每当您将 useState 与非原始类型一起使用时，您应该小心。

React 文档中的这两页将为您提供一些说明：

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

简而言之，react 使用 Object.is 来确定在调用 setState 之间状态是否发生变化。对于对象和数组，即使其内容发生变化，这也可能返回 true。

Answer 2

在 React 中，useState 钩子不会立即更新状态。状态更新是异步的，这意味着调用状态设置函数后更新的状态值可能无法立即可用。

要解决此问题，您可以使用 useEffect 挂钩来侦听文件状态的更改，并在更新时执行任何必要的操作。这是代码的更新版本，其中包含 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>
  );
}

在此更新的代码中，我们添加了一个 useEffect 挂钩，该挂钩通过将 file 指定为 useEffect 挂钩的第二个参数数组中的依赖项来侦听文件状态的更改。每当文件状态更新时，useEffect 回调函数内的代码就会执行。您可以使用 useEffect 挂钩中更新的文件值执行任何必要的操作。

通过使用 useEffect 挂钩，您应该会看到状态更新后正确记录了更新的状态值。