将数组中的所有元素加入单个字符串后无法更新 React.useState("")答案

【问题标题】：Unable to update React.useState("") after joining all elements in array to single string将数组中的所有元素加入单个字符串后无法更新 React.useState("")
【发布时间】：2021-10-29 08:22:42
【问题描述】：

我正在尝试在一个函数中使用 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>
  );
};

【问题讨论】：

为什么const values = [];在onClick函数之外？
@KavinduVIndika 在函数内部也没有多大意义
这能回答你的问题吗？ Why is React not rendering my component state correctly?
是的，没错……现在我明白了，在这种情况下，OP 试图将值推送到数组变量而不是状态中。
你不能那样做。任何时候你在 React 组件中看到 .push 或 .sort，这都是一个错误。将值放入状态中，并且仅将它们连接起来以显示，将它们存储在连接状态中是没有意义的。

标签： javascript arrays reactjs use-state

【解决方案1】：

当您不调用setDisplay 时console.log 似乎工作的原因仅仅是因为组件的状态没有改变。

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

解决方案

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

【讨论】：

哇，这是一个非常清晰简洁的答案，并且非常感谢由于组件的重新渲染而对 console.log() 的澄清。谢谢。

【解决方案2】：

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

【讨论】：

不胜感激为什么这个答案没有用的评论。
你能告诉我为什么这条评论没有用吗？
我觉得 OP 主要是在询问如何对 react 组件进行状态管理，而不是使用 join 或 concat。
@imcodean 你能试试这个解决方案并告诉我它是否有效吗？

【解决方案3】：

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

【讨论】：

谢谢，它有效！我刚才确实尝试过这样的事情，但没有奏效。嗯，谢谢你的快速反应。太快了，仍然无法在 10 分钟内接受这个答案。
这并没有真正解决 OP 代码的问题：它们通过推送到值数组来非法地改变状态。如果 App 没有重新渲染，这只会“工作”。请参阅有关问题的 cmets。
@imcodean 确保删除声明 values.push(value) 它在这里没有任何用处
是的，我已将其完全替换为 const values = []; const onClick = (value) => { setDisplay((values) => [...values, value].join("")) }; 谢谢。