将数组中的所有元素连接到单个字符串后无法更新 React.useState("")

Question

我正在尝试在函数中使用 setDisplay 更新 React.useState("")，该函数采用字符串数组并在 setDisplay 之前将它们连接成单个字符串。

没有 setDisplay，我可以 console.log() 并获得连接的数组。

const App = () => {
  const [display, setDisplay] = React.useState("");

  const values = [];
  const onClick = (value) => {
    values.push(value);
    console.log(values) // w/o setDisplay output: ["1","2","3","4"]; w/ setDisplay output: ["1"]; ["2"]; ["3"]; ["4"];
    setDisplay(values.join(""))
  };

  return (
    <div className="p-5">
      {display}
      <NumPads data={keypress} onClick={onClick} />
      <OperatorPads data={keypress} onClick={onClick} />
    </div>
  );
};

Answer 1

setDisplay((values) => ([...values, value].join("")]))

Answer 2

  const onClick = (value) => setDisplay((dispay) => display.concat('', value));

Answer 3

当您不调用 setDisplay 时 console.log 似乎起作用的原因很简单，因为组件的状态没有改变。

当您调用 setDisplay 时，您更改了状态，因此整个组件重新呈现，这导致 values 重置回空数组。

解决方案

解决此问题的一种方法已在答案中显示。
另一种方法是用 useRef:
包装你的 values 数组
```
const values = useRef([]);
```
然后使用values.current
访问数组
另一种方法是完全消除 values 的使用，并将回调更改为：
```
const onClick = (value) => {
  setDisplay(display + value);
};
```

将数组中的所有元素连接到单个字符串后无法更新 React.useState("")

Unable to update React.useState("") after joining all elements in array to single string

javascript

arrays

reactjs

use-state

解决方案