更改數據時，不會在 UI 上更新，但會在控制台中看到

Question

在 React 項目中，輸入字段的某些記錄可以更改日期數據，但不會反映在 UI 上，當在控制台中看到時，它會顯示在那里。 我正在使用 react datepicker 作為日期組件。 請參考以下代碼：

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}
      setStartDate={setStartDate}
      />
   </div>
)}

正如您從上面的代碼中看到的那樣，我正在從道具傳遞“coldata”並相應地顯示。 數據不會在 UI 上更新，但可以在控制台中看到。

您可以從下圖中看到，“Shawns”的日期數據已更改，但並未在 UI 上更新，但可以在控制台中看到。 解決它的最佳解決方案是什么？

請參考codesandbox鏈接--> https://codesandbox.io/s/elated-varahamihira-xpjtdb?file=/src/Grid.js:499-544

Answer 1

問題是，您正確設置了startDate但從不使用它來顯示數據。

如果您只是在組件中使用startDate而不是colData ，您將看到更改開始正確反映：

 <DatePickerNew
   setRequesterDate={(e) =>
     dateCallback({dateVal: e, id: rowData[0].id})
   }
   startDate={startDate} // <- Using startDate here
   setStartDate={setStartDate}
 />

您顯然需要 state 分別為每一行，如果您在DatePickerNew組件中有startDate state 會更好