如何将计数保存在计数器应用程序上，并将该计数呈现在一个列表中，显示以前所做的计数？(使用反应)

Question

我已经创建了一个简单的计数器应用程序，允许你递增、递减和重置计数。下一个目标是保存计数，在这里你能够显示以前计算的历史。首先为 "保存计数 "按钮创建一个函数组件。

我是通过创建一个空的useState数组来实现的。然后为saveCount创建一个onClickFunction，其中saveCount对计数应用一个传播操作符，然后我在每次按下'保存计数'按钮时通过数组进行映射。这是基于下面链接中'useState with Array'的例子。

https:/daveceddia.comusestate-hook-examples。

你可以在下面找到我尝试过的代码（也可以使用这个链接。https:/codesandbox.ioscounter-app-project-save-nx7x6?file=srcindex.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>
  );
}

Answer 2

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>