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

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

我正在尝试在函数中使用 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>
  );
};
setDisplay((values) => ([...values, value].join("")]))
  const onClick = (value) => setDisplay((dispay) => display.concat('', value));

当您 调用 setDisplayconsole.log 似乎起作用的原因很简单,因为组件的状态没有改变。

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

解决方案

  • 解决此问题的一种方法已在 答案中显示。

  • 另一种方法是用 useRef:

    包装你的 values 数组
    const values = useRef([]);
    

    然后使用values.current

    访问数组
  • 另一种方法是完全消除 values 的使用,并将回调更改为:

    const onClick = (value) => {
      setDisplay(display + value);
    };