javascript - 如何在计数器应用程序上保存计数并将该计数显示在显示之前计数的列表中？ (使用 react )

Question

我创建了一个简单的计数器应用程序，允许您递增、递减和重置计数。下一个目标是保存计数，您可以在其中显示先前计算的历史记录。首先为“保存计数”按钮创建一个功能组件。

我通过创建一个空的 useState 数组来解决这个问题。然后为 saveCount 创建一个 onClickFunction，其中 savingCount 将扩展运算符应用于计数，然后每次按下“保存计数”按钮时我都会映射数组。这是基于以下链接中的“useState with Array”示例:

https://daveceddia.com/usestate-hook-examples/

您可以在下面找到我尝试过的代码(也使用此链接:https://codesandbox.io/s/counter-app-project-save-nx7x6?file=/src/index.js:286-1297):

function App() {
  const [count, setCount] = useState(0);
  const savedCount = useState([]);

  const incrementCount = increment => {
    setCount(count + increment);
  };

  const decrementCount = decrement => {
    setCount(count - decrement);
  };

  const resetCount = () => {
    setCount(0);
  };

  const saveCount = () => {
    savedCount([
      ...count,
      {
        id: count.length
      }
    ]);
    resetCount();
  };

  return (
    <div className="App">
      <ButtonIncrement increment={1} onClickFunction={incrementCount} />
      <ButtonIncrement increment={10} onClickFunction={incrementCount} />
      <ButtonDecrement decrement={1} onClickFunction={decrementCount} />
      <ButtonDecrement decrement={10} onClickFunction={decrementCount} />
      <Reset onClickFunction={resetCount} />
      <span>{count}</span>
      <Save onClickFunction={saveCount} />
      <ul>
        {savedCount.map(count => (
          <li key={count.id}>count</li>
        ))}
      </ul>
    </div>
  );
}

Answer 1

function App() {
  const [count, setCount] = useState(0);
  const [savedCounts, setSavedCounts] = useState([]);

  const incrementCount = increment => {
    setCount(count + increment);
  };

  const decrementCount = decrement => {
    setCount(count - decrement);
  };

  const resetCount = () => {
    setCount(0);
  };

  const saveCount = () => {
    setSavedCounts([...savedCounts, count]);
    resetCount();
  };

  return (
    <div className="App">
      <ButtonIncrement increment={1} onClickFunction={incrementCount} />
      <ButtonIncrement increment={10} onClickFunction={incrementCount} />
      <ButtonDecrement decrement={1} onClickFunction={decrementCount} />
      <ButtonDecrement decrement={10} onClickFunction={decrementCount} />
      <Reset onClickFunction={resetCount} />
      <span>{count}</span>
      <Save onClickFunction={saveCount} />
      <ul>
        {savedCounts.map((savedCount, index) => (
          <li key={index}>{savedCount}</li>
        ))}
      </ul>
    </div>
  );
}