javascript - 如何在计数器应用程序上保存计数并将该计数显示在显示先前计数的列表中？（使用反应）

Question

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

我通过创建一个空的 useState 数组来解决这个问题。然后为 saveCount 创建一个 onClickFunction，其中 savedCount 将扩展运算符应用于计数，然后每次按下“保存计数”按钮时我都会映射数组。这是基于以下链接中的“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>
  );
}

标签： javascriptreactjscounter

Answer 1

1. 修复savedCount为useState返回一个数组（元组[state,setState]）。
2. saveCount使用功能时修复useState。
3. 使用唯一 key道具渲染列表项。

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

<ul>
  {savedCount.map((count, index) => (
    <li key={index}>count: {count.id}</li>
  ))}
</ul>