如何在 React 中的值更改时更新 useState()

Question

我在 React 中更改计数值时遇到问题。

我有动态集，我想在集的大小发生变化时渲染它！

所以我想在 ratedSet 的大小发生变化时将 count 变量更新为 ratedSet.size。

我知道 useSet 在事情结束之前不会再次呈现，所以我尝试使用 useEffect 但它仍然不起作用。我想我没有正确使用它。

如何在集合大小发生变化时显示它？

下面是我的代码。我对我尝试做的事情添加了一些评论：

import React, { useEffect, useState } from "react";
import BoardCardMain from "./component/BoardCardSurvey";
//other import statements

export default function Survey() {
  const [gameList, setGameList] = useState<Game[]>([]);
  const [count, setCount] = useState(0); //This is the count variable that I want to keep update
  const [width] = useState(window.innerWidth);
  let ratedSet = new Set(); //this is the set that I want to keep track of
  let cnt = 0;

  useEffect(() => {
    setGameList(tempData.gameList);
  }, []);

// I tried to do this but im not even close to answer...
  useEffect(() => {
    setCount(ratedSet.size);
  }, [ratedSet.size]);

  //This is the part I am changing the size of set dynamically
  //I am getting gameNo and score from child tsx, and am updating the set based on it
  const countHandler = (ratedGameNo: number, score: number) => {
    if (score > 0) {
      ratedSet.add(ratedGameNo);
    } else {
      ratedSet.forEach((item) => {
        if (item === ratedGameNo) {
          ratedSet.delete(item);
        }
      });
    }
//So here, if I console.log(ratedSet.size), it gives me correct values.
//but if i do setCount(ratedSet.size) it only updates once and never change again
  };
  return (
    <>

      SIZE IS : {count}
      SIZE IS : {ratedSet.size}
      None of them works 
     
      <Box> I am updating my set with below map : </Box>

        <Container style={{ marginTop: 20, padding: 10 }}>
          <Grid container spacing={2}>
            {gameList.map((game) => (
              <BoardCardMain
                key={game.gameNo}
                game={game}
                parentCallback={countHandler}
              ></BoardCardMain>
            ))}
          </Grid>
        </Container>
    </>
  );
}
const tempData = {
  gameList: [
    {
      gameNo: 1,
      gameImg:
        "https:/",
    },
    {
      gameNo: 12,
      gameImg:
        "https://",
    },
    {
      gameNo: 2,
      gameImg:
        "https://r",
    },
  ],
};

Answer 1

因为ratedSet不是组件的状态。改变集合不会导致组件 re-render。所以useEffect(() => {}, [ratedSet.size])钩子不会再执行。

我认为有两种解决方案：

当对 ratedSet 进行任何更改时强制更新组件。

const forceUpdate: () => void = React.useState()[1].bind(null, {});

将ratedSet保持为状态，您可以创建自定义挂钩，如useSet。（推荐）

而你声明的ratedSet里面的函数组件可能是错误的。因为每次组件渲染，你都会创建一个新的。

Answer 2

我按照建议将 rateSet 设置为状态并且有效。

我删除了 Set 并改用了 array


  const [count, setCount] = useState(0);
  const [ratedGame, setRatedGame] = useState<number[]>([]);

  const countHandler = (ratedGameNo: number, score: number) => {
    if (score > 0) {
      if (ratedGame.length === 0) { 
        ratedGame.push(ratedGameNo);
        setCount(count + 1);
      } else {
        let found = ratedGame.includes(ratedGameNo) ? true : false;
        if (found) {
        } //do nothing
        else {
          setCount(count + 1);
          ratedGame.push(ratedGameNo);
        }
      }
    } else if (score === 0) {
      setCount(count - 1);
      var index = ratedGame.indexOf(ratedGameNo);
      if (index !== -1) {
        ratedGame.splice(index, 1);
      }
    }
  };

如何在 React 中的值更改时更新 useState()

How to update useState() when value changes in React

typescript

reactjs

react-hooks

use-effect

use-state