React - 如何比较基于 API 的 prev 和 current state答案

【问题标题】：React - how to compare prev and current state that is based on APIReact - 如何比较基于 API 的 prev 和 current state
【发布时间】：2021-10-08 05:38:07
【问题描述】：

我正在准备一款游戏，玩家必须根据出示的牌来决定下一张牌是高于还是低于前一张牌。每一轮，数据（卡值和图像）都从 API https://deckofcardsapi.com/ 中提取。

我有一个问题，如果从API下载数据，如何比较新旧条件。

import { useEffect, useState, useCallback } from 'react';
import Card from './components/Card/Card';
import { Fragment } from 'react';
import HistoryTable from './components/HistoryTable/HistoryTable';
import './App.scss';
import Buttons from './components/Buttons/Buttons';
import Stats from './components/Stats/Stats';

function App() {
  const [card, setCard] = useState({});
  const [isLoading, setIsLoading] = useState(true);
  const [httpError, setHttpError] = useState();
  const [roundNumber, setRoundNumber] = useState(1);
  const [score, setScore] = useState(0);

  function handleHigherClick(e) {
    e.preventDefault();
    setRoundNumber((prevState) => ++prevState);
//How can I compare new state with previous?
  }

  function handleLowerClick(e) {
    e.preventDefault();
    setRoundNumber((prevState) => ++prevState);
//How can I compare new state with previous?
  }

  const fetchCard = useCallback(async () => {
    setIsLoading(true);
    setHttpError(null);
    try {
      const response = await fetch(
        'https://deckofcardsapi.com/api/deck/new/draw/?count=1'
      );
      if (!response.ok) {
        throw new Error('Something went wrong!');
      }

      const responseData = await response.json();
      const data = responseData.cards[0];

      setCard({
        value: data.value,
        image: data.image,
      });
    } catch (error) {
      setHttpError(error.message);
    }
    setIsLoading(false);
  }, []);

  useEffect(() => {
    fetchCard();
  }, [roundNumber, fetchCard]);

  return (
    <Fragment>
      <Header />
      <main>
        <Stats round={roundNumber} score={score} />
        <Card
          value={card.value}
          image={card.image}
          loading={isLoading}
          error={httpError}
        />
        {roundNumber !== 30 ? (
          <Buttons higher={handleHigherClick} lower={handleLowerClick} />
        ) : (
          <Buttons />
        )}
        <HistoryTable />
      </main>
    </Fragment>
  );
}

export default App;

【问题讨论】：

您可以将 prev 作为参数传递给 set 函数。

标签： reactjs asynchronous state

【解决方案1】：

在我看来，您必须手动执行此操作，将每次获取的结果存储在允许您进行此比较的结构中。两位数组在我看来是最理想的形式。也许您可以只使用.pop() 和.shift() 来操纵这个结构

【讨论】：