setState 不会立即更新

Question

我正在使用一个反应应用程序，我正在尝试更新一个状态，它不会立即更新。我在互联网上寻找它并发现，但问题是，所有这些人都在使用类组件，而我正在使用功能组件。他们在谈论 setState 函数中的回调，但我在我的代码中尝试过，但没有奏效！！

这是我的代码：

async function handleSelectImage(event: ChangeEvent <HTMLInputElement>) {
    if (!event.target.files) {
      return;
    }
    const selectedImages = Array.from(event.target.files);
    selectedImages.map((image) => {
      if (!(image.type === 'image/png' || image.type === 'image/jpg' || image.type === 'image/jpeg')) {
        const imageIndex = selectedImages.indexOf(image);
        selectedImages.splice(imageIndex, 1);
        alert('Só são aceitos arquivos jpeg, jpg e png.');
      }
    });

    try {
      setImages(images.concat(selectedImages));
    } catch (err) {
      console.error(err);
    }
    console.log(images);

希望你能帮助我！！！！ 谢谢！！！ :)

Answer 1

无法在 React 的功能组件中读取状态，因为它是异步操作。

所以，不是您的状态没有更新，而是您的 console.log(images) 函数在更新状态的异步函数返回之前被调用和读取。

好的……那该怎么办呢？

两个选项： 1。将状态传递给另一个组件并在那里读取它。 这是首选，imo，因为您可以将有状态组件与“哑”组件分开。

所以在上面的组件中，您可以将images 作为道具传递给子组件：

在 ImageDisplay 内部，从 props 中获取图像状态。

2。等待组件内部的异步函数更新。 如果您真的想读取功能组件内部的状态，则必须等待异步函数返回。为此，我认为最简单的方法是设置“等待”状态，就像这样。

const [isLoading, setLoading] = useState(true);

/// rest of your call and your async function 
///try block: 
try {
      setImages(images.concat(selectedImages));
      setLoading(false);
    } catch (err) {
      console.error(err);
    }

if(setLoading) {
  console.log("The images haven't loaded yet");
} else {
  console.log(images)
}

基本上，您是在给组件一个条件来等待图像状态发生变化。当该条件不再成立时，图像将准备好显示。 （您也可以在前端渲染数据，而不仅仅是控制台！）

祝你好运。