Geek asks and answers

Avoiding React Markup Checksum Alerts When Rendering Time

When using isomorphic rendering for a React component that displays time, I sometimes encounter a problem when the server displays the time at a point A, but by the time the client takes it as a SPA, the time from the point Ahas changed to a point B, and React displays a warning React attempted to reuse markup in a container but the checksum was invalid:

enter image description here

The occurrence of the error is obviously more pronounced, since you are showing more granular units of time, such as seconds, but it would be nice to be sure that I will not encounter this in a minute, hour, day, etc. borders.

Is there a way to tell React on the client side, effectively: "Everything is in order, this small part of the DOM here may differ from the server one"? Or perhaps in a different way that I did not think about?

More details

I use the React-IntlFormattedRelative component to show the date the item was created in a friendly way. Of course, the creation date of the element remains unchanged between the client and the server (and is transmitted to the client in the Flux serialized storage), but the server and client rendering time differences are played out long enough so that the displayed HTML often, but not always, is different.

+4
source share
2 answers

React Intl v2. initialNow .

React Intl v2 ​​ <FormattedRelative>, "" . , , , initialNow. <FormattedRelative> , , initialNow:

:

<FormattedRelative value={date} initialNow={Date.now()}/>

IntlProvider, FormattedRelative .

: <IntlProvider> initialNow , "" <FormattedRelative> . / .

:

<IntlProvider initialNow={Date.now()}>
  <FormattedRelative value={date}/>
</IntlProvider>

: https://github.com/yahoo/react-intl/wiki/Upgrade-Guide#update-how-relative-times-are-formatted

+1

, , , .

, , , force_update.

, , ,

+1

More articles:


All Articles