React Native——UseEffect 不断更新

Question

我正在使用 useEffect 从我的异步存储中获取总的拼图块，以显示在主页上。我使用异步存储来获取存储中存储的拼图数量，然后为每个拼图添加拼图块的总数。我在 useEffect 中执行此操作，因为拼图块的总数可能会发生变化，具体取决于用户是否将更多拼图添加到他们的集合中。但是，当我使用 useEffect 时，我的拼图总数量会不断更新并且永不停止。

代码：

let [totalPieces, setTotalPieces] = useState(0);
  const [numJigsaw, setNumJigsaw] = useState([]);
  const getNumOfJigsaw = async () => {
    try {
      setNumJigsaw(await AsyncStorage.getAllKeys());
    } catch (e) {}
    return numJigsaw;
  };
  const getAllJigsaw = async () => {
    let jigsaws = await getNumOfJigsaw();
    for (let z = 0; z < jigsaws.length; z++) {
      let currentJigsaw = JSON.parse(await AsyncStorage.getItem(jigsaws[z]));
      setTotalPieces(totalPieces+ parseFloat(currentJigsaw.pieces));
    }
  };
  useEffect(() => {
    getAllJigsaw();
  }, [totalPieces]);

我认为问题是因为 totalPieces 是从属的？不过我不太确定。

Answer 1

是 - 当 totalPieces 更改（通过依赖项）时，您已将效果设置为运行。

效果（当异步内容解析时）设置 totalPieces，因此由于依赖性等原因，效果再次运行

听起来您正在寻找类似

的东西

const [totalPieces, setTotalPieces] = useState(0);
const [jigsawKeys, setJigsawKeys] = useState([]);
useEffect(() => {
  (async () => {
    const jigsaws = await AsyncStorage.getAllKeys();
    let total = 0;
    for (let z = 0; z < jigsaws.length; z++) {
      let currentJigsaw = JSON.parse(await AsyncStorage.getItem(jigsaws[z]));
      total += parseFloat(currentJigsaw.pieces);
    }
    setJigsawKeys(jigsaws);
    setTotalPieces(total);
  })();
}, [totalPieces]);

总而言之（我将 numJigsaw 重命名为 jigsawKeys 这样更有意义）。

React Native——UseEffect 不断更新

React Native - UseEffect Constantly Updates

javascript

typescript

react-native

react-hooks

use-effect