重写后的标题为：Initial update of React state is not occurring

Question

我有一个图像上传组件，用户可以一次上传一张或多张图像。当用户上传图像时，我总是尝试使用 useState() 更新状态。但状态并没有在第一时间更新。我如何更新以下代码才能使其正常工作。

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 挂钩，您应该会看到状态更新后正确记录了更新的状态值。