為什么在useEffect中狀態沒有更新？

我正在嘗試制作一個加密價格跟蹤器網站。我每 10 秒更新一次coinList變數prevData變數后獲取資料。我也想訪問useEffect 中的 prevData變數，但在它里面變數沒有更新，它的值仍然是 []。但是如果我在useEffect之外使用prevData資料正在改變，我可以使用它。

我只想要正在更新的useEffect 中prevData的值。

function App() {
    const [coinsList, setCoinsList] = useState([]);
    const [prevData, setPrevData] = useState([]);
    let [width, setWidth] = useState(window.innerWidth)
    useEffect(() => {
        async function fetchData() {
            const response = await fetch('api key').then(res => res.json())
setCoinsList(res);
setPrevData(res);
        }
        fetchData()
        async function fetchData2() {
            const res = await fetch('api key').then(res => res.json())
            for (let i = 0; i < prevData.length; i  ) {
                if (res[i].current_price > prevData[i].current_price) {
                    let coin = document.getElementById(`${prevData[i].id}`)
                    coin.classList.add('green')
                    console.log(coin)
                    // setTimeout(() => {
                    //     coin.classList.remove('green')
                    // }, 1000)
                } else if (res[i].current_price < prevData[i].current_price) {
                    let coin = document.getElementById(`${prevData[i].id}`)
                    coin.classList.add('red')
                    console.log(coin)

                    // setTimeout(() => {
                    //     coin.classList.remove('red')
                    // }, 1000)
                } else {
                    let coin = document.getElementById(`${prevData[i].id}`)
                    console.log(coin)
                    coin.classList.add('blue')
                    // setTimeout(() => {
                    //     coin.classList.remove('blue')
                    // }, 1000)
                }
            }
            setPrevData(res);
            setCoinsList(res);
        }
        setInterval(() => {
            fetchData2()
            console.log(prevData) // it is not updating
        }, 10000)
    }, [])
    useEffect(() => {
        window.addEventListener('resize', () => {
            setWidth(window.innerWidth)
        })
    }, [window.innerWidth])
    console.log(prevData) // it is updating 

uj5u.com熱心網友回復：

在fetchData2你有一個陳舊的prevData國家圍欄。它在區間回呼范圍內關閉。

一種補救方法是使用 React ref 和附加useEffect鉤子來快取prevData可以在fetchData2回呼中訪問的狀態副本。

function App() {
  const [coinsList, setCoinsList] = useState([]);
  const [prevData, setPrevData] = useState([]);

  const prevDataRef = React.useRef(prevData);

  useEffect(() => {
    prevDataRef.current = prevData;
  }, [prevData]);

  ...

  useEffect(() => {
    ...
    async function fetchData2() {
      const prevData = prevDataRef.current; // <-- grab current value

      const res = await fetch('api key').then(res => res.json());

      for (let i = 0; i < prevData.length; i  ) {
        if (res[i].current_price > prevData[i].current_price) {
          let coin = document.getElementById(`${prevData[i].id}`);
          coin.classList.add('green');
        } else if (res[i].current_price < prevData[i].current_price) {
          let coin = document.getElementById(`${prevData[i].id}`);
          coin.classList.add('red');
        } else {
          let coin = document.getElementById(`${prevData[i].id}`);
          coin.classList.add('blue');
        }
      }
      setPrevData(res);
      setCoinsList(res);
    }

    setInterval(() => {
      fetchData2();
    }, 10000)
}, []);

uj5u.com熱心網友回復：

您在范圍內關閉了prevData值setInterval，您可以使用 ref 來修復它：

const prevDataRef = useRef();

// Keep the ref updates
useEffect(() => {
  prevDataRef.current = prevData;
}, []);

// no closure
useEffect(() => {
  setInterval(() => {
    fetchData2(); // use prevDataRef.current
    console.log(prevDataRef.current); // updated
  }, 10000);
}, []);

標籤：javascript 反应 反应钩子 使用效果 使用状态

上一篇：如果表單有隱藏欄位，Vue表單提交將不起作用

下一篇：如何從基本URL字串中獲取十六進制數字