React useState 像字符串一样附加值而不是递增？

Question

我正在构建一个非常简单的计数器应用程序，其中有增量和减量按钮。

根据按钮点击次数显示计数值。

唯一不同的是，用户可以输入值（假设是 10），然后按钮会以这种方式响应（单击 + 时，然后是 11；单击减号按钮时，然后是 9） .

这样，计数值就是一个 input 标签本身。

我这里有一个奇怪的错误：

第一次渲染应用时，假设我将计数值添加到 30，然后单击 + 按钮，结果是 301 而不是 31 的意思, 它是在末尾附加值而不是相加。

虽然上述错误不适用于 - 按钮。

import React, { useState } from "react";

export default function App() {
  const [count, setCount] = useState(1);

  return (
    <div className="container">
      <button className="btnDe" onClick={() => setCount((prev) => prev - 1)}>
        -
      </button>
      <div className="countContainer">
        <input
          type="number"
          value={count}
          onChange={(e) => setCount(e.target.value)}
          className="countInput"
        />
      </div>
      <button className="btnIn" onClick={() => setCount((prev) => prev + 1)}>
        +
      </button>
    </div>
  );
}

代码和盒子：https://d4yz9.csb.app/

或者如果我不更改 count 值而只是在 1

处启动它，甚至上述错误也不成立

任何一点帮助都可以:)

感谢阅读到此。

Answer 1

e.target.value 是字符串类型。

在设置之前将其转换为数字：

onChange={(e) => setCount(+e.target.value)}

Answer 2

问题是，当您从输入的上下箭头（浏览器的箭头）更改值时，将触发输入的 onChange，这些值将存储为字符串而不是数字或直接从输入输入数字。

将你的增量更改为这样 (+prev) 这会将字符串转换为数字

setCount((prev) => +prev + 1)

Answer 3

转换为数字以不连接字符串输入:)

      <button className="btnIn" onClick={() => setCount((prev) => Number(prev) + 1)}>

Answer 4

发生的事情是，当输入数字时，它实际上输入了一个字符串。然后在添加 +1 时，由于 count 现在是一个字符串，它连接 count 和 1.

将条目转换为 int 是修复它的一种方法：

onChange={(e) => setCount(parseInt(e.target.value))}

React useState 像字符串一样附加值而不是递增？

React useState appends the value like string instead of incrementing?

javascript

reactjs

use-state