React useState 钩子正在附加值而不是覆盖[重复]

Question

所以我想每 5 秒更新一次实时价格，因此我将递归 setTimeout 放入函数中。不幸的是，现在价格馈送是这样工作的：

1. 一开始控制台输出为：未定义和当前价格
2. 价格更改后输出为：未定义、旧价格、新当前价格
3. 下一次价格更改后：未定义、最旧价格、旧价格、新当前价格

为什么它会附加值而不是像往常一样覆盖它们？

import React, { useState, useEffect } from 'react';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import Livebsv from './livebsv.js';

const CoinGecko = require('coingecko-api');
const CoinGeckoClient = new CoinGecko();


export default function Calculatorbuy() {
    const [value, setValue] = useState(0);
    
    const [price, setPrice] = useState();

    useEffect(() => {
        const fetchPrice = async () => {
            const result = await CoinGeckoClient.simple.price({
                ids: "bitcoin-cash-sv",
                vs_currencies: "pln",
            });
            setPrice(parseFloat(result.data.['bitcoin-cash-sv'].pln));
            console.log(price);
            setTimeout(fetchPrice, 5000)
        }; 
        fetchPrice(); 
    })

Answer 1

问题

1. 您正在控制台记录您的状态，它在入队后立即记录，这只会记录当前渲染周期的状态，而不是下一个渲染周期入队的状态。
2. 您的useEffect 挂钩在每次组件呈现时都会运行，因此您会启动多个超时。我怀疑您看到的“附加”是运行相同回调的重复超时的结果。

解决方案

1. 组件挂载时使用空的依赖数组运行一次​​效果。
2. 使用时间间隔运行提取。
3. 返回清理函数以清除所有运行间隔。
4. 控制台以自己的依赖关系记录更新的状态。

代码：

useEffect(() => {
  const fetchPrice = async () => {
    const result = await CoinGeckoClient.simple.price({
      ids: "bitcoin-cash-sv",
      vs_currencies: "pln",
    });
    setPrice(parseFloat(result.data.['bitcoin-cash-sv'].pln));
  };

  fetchPrice(); // <-- first initial fetch

  const timerId = setInterval(fetchPrice, 5000); // <-- start interval

  return () => clearInterval(timerId); // <-- return cleanup
}, []); // <-- run on mount

useEffect(() => {
  console.log(price); // <-- log updated state
}, [price]); // <-- run on price update

Answer 2

有很多问题。

首先，在没有依赖关系的情况下调用useEffect 意味着它将在每次重新渲染后运行。即fetchPrice 本身会递归运行以获取和更新状态，每次更新都会导致组件重新渲染，从而触发useEffect 并因此触发setTimeout 堆栈。

查看：https://reactjs.org/docs/hooks-effect.html#example-using-hooks

改成

useEffect(
  () => {
    // your code here
  },
  [],
);

那么它将只在挂载时运行。

第二，如cmets中所说，setState是异步的，设置它然后立即记录它会显示旧的结果。