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

Question

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

我已经通过创建一个空的 useState 数组来解决这个问题。然后为 saveCount 创建一个 onClickFunction，其中 savedCount 将展开运算符应用于计数，然后每次按下 'Save Count' 按钮时我都会映射数组。这是基于下面 link 中 'useState with Array' 的示例：

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

您可以在下面找到我尝试过的代码（也使用此 link：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

将 savedCount 固定为 useState returns 数组（[state,setState] 的元组）。
在使用函数 useState 时修复 saveCount。
使用 unique key prop.

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>

Answer 2

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>
  );
}

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

How to save the count on a counter app and present that count in a list showing previous counts made? (using react)

javascript

counter

reactjs

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

How to save the count on a counter app and present that count in a list showing previous counts made? (using react)

javascript

counter

reactjs

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