Javascript 如何在计数器应用程序上保存计数，并在显示以前计数的列表中显示该计数？（使用react）

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

我通过创建一个空的useState数组来实现这一点。然后为saveCount创建一个onClick函数，其中savedCount对计数应用一个扩展运算符，然后每次按下“Save count”按钮时，我都会映射数组。这基于以下链接中的“useState with Array”示例：

您可以在下面找到我尝试的代码（也可以使用此链接：）：

函数应用程序（）{
const[count，setCount]=useState（0）；
const savedCount=useState（[]）；
常量递增计数=递增=>{
设置计数（计数+增量）；
};
常量递减计数=递减=>{
设置计数（计数-递减）；
};
常量重置计数=（）=>{
设置计数（0）；
};
const saveCount=（）=>{
保存帐户([
计数
{
id:count.length
}
]);
resetCount（）；
};
返回(
{count}

{savedCount.map（计数=>(
count
))}

);
}

将

savedCount

修复为

useState

返回一个数组（tuple of

[state，setState]

）

使用functional

useState

时修复

saveCount

使用唯一

键

属性呈现列表项

const[savedCount，setSavedCount]=useState（[]）；
const saveCount=（）=>{
setSavedCount（prev=>[…prev，{id:count}]）；
resetCount（）；
};

{savedCount.map（（计数，索引）=>(
count:{count.id}
))}

函数应用程序（）{
const[count，setCount]=useState（0）；
const[savedCounts，setSavedCounts]=useState（[]）；
常量递增计数=递增=>{
设置计数（计数+增量）；
};
常量递减计数=递减=>{
设置计数（计数-递减）；
};
常量重置计数=（）=>{
设置计数（0）；
};
const saveCount=（）=>{
setSavedCounts（[…savedCounts，count]）；
resetCount（）；
};
返回(
{count}

{savedCounts.map（（savedCount，index）=>(
{savedCount}
))}

);
}

您是否有特定的问题？您的saveCount状态是否与count状态的语法相似，例如

[savedCount，useSavedCount]=useState（[]）

，使用

…

扩展运算符将以前的存储计数和当前计数添加到新的存储计数中，并使用

数组.prototype.map中的
索引
参数设置键：
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>
  );
}

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>

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