如何使用 useState 在反应功能组件的循环中正确设置 state

Question

考虑一下我正在上传一堆文件，并且我正在尝试跟踪正在进行的文件，以便每当上传完成时，我都会减少我的 state 直到所有文件都完成，最后我将上传的 state 更改为false ：（这里我做了一个sleep function 来模拟上传过程）。

import React, { useState} from "react";

const sleep = (ms, dev =1 ) => {
  const msWithDev = (Math.random() * dev + 1) * ms
  return new Promise(resolve => setTimeout(resolve, msWithDev))
}

function Counter() {
  const [, setSortEnabled] = useState(true)
  const [count, setCount] = useState(0)
  const arr = [1, 2, 3, 4, 5]

  const upload = async () => {
    await sleep(1000)
    setCount(c => c - 1)

      console.log(`count state: ${count}`)

      if (count === 0) {
        console.warn('Sort set to enabled again.')
        setSortEnabled(true)
    }
  }


  const onClick = ()  => {
    console.warn('Sort set to disabled.')
      arr.forEach(item => {
        setCount(c => c + 1)
        console.error(count)
        upload()
      })
    }

  return (
    <>
    <button onClick={onClick}>Click me!</button>
    </>
  );
}

export default Counter;

问题在于upload ，

function `console.log(\`count state: ${count}\`)`

始终记录0 ，这意味着 state 从未更新过。

我在这里做错了什么？

Answer 1

这意味着 state 从未更新过

它确实得到了更新，你只是因为闭包而记录了陈旧的价值。

闭包是捆绑在一起（封闭）的 function 及其周围 state（词法环境）的组合。 换句话说，闭包使您可以从内部 function 访问外部函数的 scope。

要修复它，请使用setState 功能更新：

const onClick = () => {
  console.warn("Sort set to disabled.");
  arr.forEach((item) => {
    setCount((c) => {
      console.error(c);
      return c + 1;
    });
    upload();
  });
};

Answer 2

而不是依靠计数，您必须使用Promise.all等待所有文件上传。 在您的情况下，计数是从关闭中收到的，因此即使更新了 state，计数变量仍然不受影响。

您可以使用 Promise.all 来实现上述逻辑

function Counter() {
  const [, setSortEnabled] = useState(true)
  const arr = [1, 2, 3, 4, 5]

  const upload = async () => {
    await sleep(1000);
  }


  const onClick = async ()  => {
    console.warn('Sort set to disabled.')
      const promises = arr.map(item => {
        console.error(count)
        return upload()
      });
      await Promise.all(promises);
      console.warn('Sort set to enabled again.')
      setSortEnabled(true)
    }

  return (
    <>
    <button onClick={onClick}>Click me!</button>
    </>
  );
}

export default Counter;

更新：

要解决计数 state 的关闭问题，您可以使用 refs 和 useEffect。 然而，它是一种解决方法，不应该是首选

import React, { useState} from "react";

const sleep = (ms, dev =1 ) => {
  const msWithDev = (Math.random() * dev + 1) * ms
  return new Promise(resolve => setTimeout(resolve, msWithDev))
}

function Counter() {
  const [, setSortEnabled] = useState(true)
  const [count, setCount] = useState(0)
  const arr = [1, 2, 3, 4, 5]
  const countRef = useRef(count);
  useEffect(() => {
     countRef.current = count;
  }, [count ]);
  const upload = async () => {
    await sleep(1000)
    setCount(c => c - 1)

      console.log(`count state: ${count}`)

      if (countRef.current === 0) {
        console.warn('Sort set to enabled again.')
        setSortEnabled(true)
    }
  }


  const onClick = ()  => {
    console.warn('Sort set to disabled.')
      arr.forEach(item => {
        setCount(c => c + 1)
        upload();
      })
    }

  return (
    <>
    <button onClick={onClick}>Click me!</button>
    </>
  );
}

export default Counter;