useState 功能组件中的先前状态答案

【问题标题】：Previous state in a useState functional componentuseState 功能组件中的先前状态
【发布时间】：2022-01-20 14:52:32
【问题描述】：

我需要根据用户的输入旋转一个元素。问题是，在我的功能组件中，我使用 useState 挂钩来存储和更新用户键入的值，但元素的旋转不是基于最后一个输入，而是基于前一个输入。

我在 CodeSandbox 中重新创建了简化示例来说明问题。

如何让它在功能组件中正常工作？

https://codesandbox.io/s/strange-clarke-nlyuo?file=/src/App.js:0-762

【问题讨论】：

你能在状态中存储所有输入的列表/数组而不是单个数字吗？所以 OnChange 你只需将新值推送到列表中，并将值设置为旧值。
因为设置 style.transform 不会导致 React 重新渲染，但 setValue 会。

标签： javascript css reactjs

【解决方案1】：

您不应该进入 DOM 来设置转换。您应该从输入中删除 querySelector 行。

<input
  type="number"
  max={359}
  value={value}
  onChange={(e) => {
    setValue(e.target.value);
    // don't do this ?
    document.querySelector("h1").style.transform = `rotate(${value}deg)`;
  }}
/>

状态改变会触发重新渲染，所以只需在渲染期间设置transform即可：

<h1
  style={{
    transform: `rotate(${value}deg)`,
    border: "1px solid pink",
    display: "inline",
    padding: "10px"
  }}
>

【讨论】：