更改的日期值不会在 UI 中更新答案

【问题标题】：Date value changed doesn't get updated in UI更改的日期值不会在 UI 中更新
【发布时间】：2022-09-23 01:30:10
【问题描述】：

在表格网格中，填充在网格上的数据是 JSON，我从另一个组件接收它。它还具有可以更改的文本框和日期等输入字段。在这种情况下，当日期值更改时，它会在控制台中更新，但会在 UI 上更新。请参考以下代码：

const [startDate, setStartDate] = useState();

{colConfig[cIndex].data_type === \"date\" &&
   !colConfig[cIndex].cell_click_callback && (
   <div>
   <DatePickerNew
   setRequesterDate={(e) =>
   dateCallback({dateVal: e, id: rowData[0].id})}
      startDate={colData} <-- Here colData is used which comes from JSON
      setStartDate={setStartDate}
      />
   </div>
)}

正如您从上面的代码中看到的，我使用了 \'colData\'，因为我想对该值进行更改，我知道我们需要使用 \'startDate\'，但想要更改 JSON 数据和进一步处理它。在这里，我正在模仿作为 JSON 接收的 API。可以进行哪些代码更改来设置 \'colData\' 并将其反映在 UI 中。

如上图所示，记录名称为“Shawns”，日期已更改，可在下面的控制台中看到，但在 UI 上没有。非常感谢任何建议或代码更改

请同时参考代码框链接 -> https://codesandbox.io/s/elated-varahamihira-xpjtdb?file=/src/Grid.js:2386-3065

这回答了你的问题了吗？ When data is changed, doesn\'t update on UI but seen in console

标签： javascript reactjs react-datepicker

【解决方案1】：

问题是您没有使用“startDate”作为变量，而只是将 datePicker 的 startDate 设置为coldata。这意味着 startDate 将始终是coldata，并且永远不会被状态更改。您必须将 datepicker 的 startDate 属性更改为“startDate”，然后从另一个位置设置默认状态。

（例如，您可以向接收coldata的日期选择器添加另一个道具，并在安装日期选择器时使用 setStartDate 设置默认状态。）

这是一个基于您的版本的工作代码框： https://codesandbox.io/s/sad-aj-q1ir97?file=/src/Grid.js

【讨论】：

感谢您的回复...如果您不介意，请更新代码和框
我已经编辑了我的答案，以根据您的版本添加一个工作代码和框分支。您可能会注意到，我还重命名了 state 以使其更清楚它的用途。