时间戳

首页 > 解决方案 > React Router - 历史推送状态不刷新新状态对象

javascript - React Router - 历史推送状态不刷新新状态对象

问题描述

当 Promise.all 解析并保存新活动时，应将用户路由/activities到查看他们新创建的活动。一切都按预期工作，但是我目前需要/activities在路由后刷新页面（一次）才能查看表中的新活动。

  const handleSaveActivity = e => {
    e.preventDefault();
    Promise.all([
      addActivity(),
      saveActivity()
    ]).then(() => {
      props.history.push('/activities');
    })
  };

我不确定在推送新的历史状态后如何自动重新渲染页面，因此用户无需手动刷新页面即可看到新状态。如果我遗漏了一些关键的东西，很高兴提供更多的代码片段。

标签： javascriptreactjsreact-routerrefreshhtml5-history

解决方案

嗨，我回答这个问题可能有点晚了，但是这个问题可能是由于错误使用了 useEffect，如果你有一个 todo 列表，并且你想用 axios 获取数据，它看起来像这样：

useEffect(()=>{
    axios.get(`${YOUR_URL}/todos`)
      .then((res)=>{
        setTodos(todos=res.data)
      })
  },[])

现在你可以看到我们有一个空数组的初始值，所以它作为一个 ComponentDidMount，你可能想要在它获得一个新值后重新渲染组件，所以你想要一个 ComponentDidUpdate 效果，所以你只是不会将值初始化为空数组，因此它看起来像这样：

useEffect(()=>{
    axios.get(`${YOUR_URL}/todos`)
      .then((res)=>{
        setTodos(todos=res.data)
      })
  })

希望这对某人有所帮助，因为我因同样的问题而来到这里并以这种方式解决它。

推荐阅读