reactjs 为什么useState不重新呈现日期的更改？

ozxc1zmp 于 2023-04-20 发布在 React

关注(0)|答案(2)|浏览(132)

我有一个react表单，我必须在其中放入一个逻辑，如果startdate〉endate，它应该将startdate恢复为当前日期。我正在将表单值添加到useState数组对象中。初始数组对象看起来像这样-

num:"12345"
startdate: "06/14/2023"
enddate: "06/01/2023"

我已经进行了验证检查，一旦它发现startdate〉enddate，它应该将startdate的值更改为当前日期。

const [form, setForm] = useState({})

  const revertStartDate = (field) => {
    if (field == 'enddate') {
      setForm((prev) => {
        prev.startdate = new Date().toISOString() // using internal day calculator
        return {...prev}
      }
      )
    }
  }

上面的代码将表单更改为下面的形式：

num:"12345"
startdate: "04/19/2023"
enddate: "06/01/2023"

但它并没有反映在用户界面上。用户界面仍然显示06/14/2023的开始日期。我已经阅读了其他答案，它没有改变状态，即使值正在改变。
对于如何重新呈现开始日期的表单，有什么建议吗？

reactjs

来源：https://stackoverflow.com/questions/76056753/why-is-usestate-not-re-rendering-the-changes-for-dates

2条答案

按热度按时间

beq87vna1#

我不能评论，由于低贡献，但它会是有益的，如果你也提供代码片段到您的<input>。
您可能需要阅读以下文档：用状态变量控制输入
如果无论如何都需要状态，那么受控输入是有意义的-例如，在每次编辑时重新呈现UI。

赞(0）回复(0）举报 2023-04-20

fykwrbwg2#

我认为你不能直接改变状态。如果你想确保阅读这篇文档。

const [form, setForm] = useState({})

  const revertStartDate = (field) => {
    if (field == 'enddate') {
      setForm((prev) => {
        return {
          ...prev,
          startdate: new Date().toISOString()
        }
      }
      )
    }
  }

在我看来，像这样更新状态不会触发重新渲染。

setForm((prev) => {
       prev.startdate = new Date().toISOString() // using internal day calculator
       return {...prev}
     }

你想直接更新这个吗？使用immer！

赞(0）回复(0）举报 2023-04-20

我来回答

reactjs 为什么useState不重新呈现日期的更改？

2条答案

相关问题

热门标签

最新问答