使用useState鉤子每秒更新物件-有解無憂

我每 2 秒生成一個亂數，并檢查我的狀態物件資料是否有這個數字作為鍵。如果是這樣，則增加該值，否則將其作為默認值為 1 的新欄位插入到物件中。但是，每當運行亂數函式時，我的狀態物件 data 為空，因此 data.hasOwnProperty 始終為 false。為什么會這樣？

  const [data, setData] = useState({});
  useEffect(() => {
    //INTERVAL TO GENERATE RANDOM NUMBER EVERY 2 SECONDS
    const interval = setInterval(() => {
      generateRandomStock();
    }, 2000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  //GENERATES A RANDOM NUMBER AND UPDATES THE STATE 
  const generateRandomStock = () => {
    const randNumber = Math.floor(Math.random() * 9   1).toString();
    console.log(data)
    if (data.hasOwnProperty(randNumber)) {
      console.log("has");
      setData((prevState) => ({
        ...prevState,
        [randNumber]: prevState[randNumber]   1,
      }));
    } else {
      console.log("does not have");
      setData((prevState) => ({
        ...prevState,
        [randNumber]: 1,
      }));
    }
  };

uj5u.com熱心網友回復：

該generateRandomStock函式創建一個具有初始data值的閉包。那總是一個空物件{}。您可以將data接收到的回呼函式訪問到 `setData 方法，它會在其中提供更新的值。

嘗試如下

  const generateRandomStock = () => {
    const randNumber = Math.floor(Math.random() * 9   1).toString();
    setData((prevData) => {
      console.log(prevData);
      if (prevData.hasOwnProperty(randNumber)) {
        return {
          ...prevData,
          [randNumber]: prevData[randNumber]   1
        };
      } else {
        console.log("does not have");

        return {
          ...prevData,
          [randNumber]: 1
        };
      }
    });
  };

使用 useState 鉤子每秒更新物件

uj5u.com熱心網友回復：

您需要在鉤子中添加generateRandomStock函式作為依賴項。useEffect由于此函式使用該data值，因此更新該值時會更新其內容data。

const [data, setData] = useState({});

  //GENERATES A RANDOM NUMBER AND UPDATES THE STATE
  const generateRandomStock = () => {
    const randNumber = Math.floor(Math.random() * 9   1).toString();
    console.log(data);
    if (data.hasOwnProperty(randNumber)) {
      console.log("has");
      setData((prevState) => ({
        ...prevState,
        [randNumber]: prevState[randNumber]   1
      }));
    } else {
      console.log("does not have");
      setData((prevState) => ({
        ...prevState,
        [randNumber]: 1
      }));
    }
  };

  useEffect(() => {
    //INTERVAL TO GENERATE RANDOM NUMBER EVERY 2 SECONDS
    const interval = setInterval(() => {
      generateRandomStock();
    }, 2000);

    return () => {
      clearInterval(interval);
    };
  }, [generateRandomStock]);

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/462291.html

標籤：反应异步使用效果使用状态

上一篇：如何處理if條件中的異步呼叫

下一篇：并行運行相同的異步函式會導致變數混淆NodeJS