Question

我正在使用React和Flux创建Mission Clock网络应用。

代码可在此处找到：https://github.com/jcadam14/Flux-Mission-Clock

现在这是非常基础的，我是React和Flux的新手，距离我编写任何JavaScript已有很长时间了（从事单一Java应用程序业务已经太久了）。这是为了获得概念证明，因此我可以将设计基于React / Flux。

基本概念是“下一次联系”计时器递减计数，当它在完成前达到1分钟时，计数器的框会变成红色。然后，当NextContact计时器完成时，CurrentContact计时器启动，并且新的NextContact计时器应该启动。

一切正常，直到NextContact组件完成，并应使用新的NextContact更新。组件和样式中的文本会更新，但是倒数计时不会开始计时。它保持新值，但不启动计时器。

每次由于其他一些原因而发生渲染时，NextContact组件都会以新的时间再次更新，但不会开始计数。

但是，如果我将任何更改保存在任何文件中（我使用的是Visual Studio Code，并且module.hot处于活动状态），则计数器将启动，并且实际上会在应有的位置进行计数。因此，似乎变化并没有完全像我期望的那样呈现出来。

我尝试使用forceUpdate，但是它什么也没做，而且我尝试了各种获取Counter组件的方法，但是没有用。

任何帮助将不胜感激。我希望一旦了解了这一点，并能理解所有调度工作是如何工作的，那么应用程序的其余部分应该就位（计时器是应用程序的核心组件，其他一切都非常简单）。

编辑：我也尝试使用Countdown编写一个简单的计时器应用程序，但是这次使用Redux，并且发生了同样的事情。因此，我想这个问题可能是您如何强制组件重新初始化自身？

谢谢！杰森

Answer 1

好吧，我最终只写了我自己的计数器，这里是：

import matplotlib as mpl
mpl.use('Agg')
import matplotlib.pyplot as plt
import cartopy.crs as ccrs
import cartopy.io.img_tiles as cimgt


def custom_background(source_point):

    source_point = source_point.split(" ")
    source_point = (float(source_point[0]), float(source_point[1]))
    dx = 1.5
    dy = 1.5
    lon_min, lon_max = source_point[0]-dx, source_point[0]+dx
    lat_min, lat_max = source_point[1]-dy, source_point[1]+dy
    zoom = 7
    map_url = "https://www.openstreetmap.org/#map={}/{}/{}".format(zoom,source_point[0],source_point[1])
    tile = cimgt.OSM(url=map_url)
    tile = cimgt.StamenTerrain()
    ax = plt.axes(projection=ccrs.PlateCarree())
    ax.set_extent([lat_min, lat_max, lon_min, lon_max])
    ax.add_image(tile, zoom)
    #~ ax.add_image(tile)
    return ax

custom_background("45.068466 -66.45477")
plt.savefig("tile.png")

这成功了。似乎我尝试过的所有计时器/计数器可能都缺少了componentDidUpdate（）方法，因为一旦将其添加到MCCountdown中，当在组件上设置新日期时，时钟就会重新启动。

不知道这是否可以漂亮，但是可以用，我现在对此感到非常高兴。

React-Countdown-现在不更新渲染

1 个答案: