Question

当Promise.all解决并保存新活动时，应将用户路由到/activities以查看其新创建的活动。一切正常，但是在路由之后，我目前需要刷新/activities页（一次），以便查看表中的新活动。

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

我不确定在推送新的历史记录状态后如何自动重新呈现页面，因此用户无需手动刷新页面即可查看新状态。如果我遗漏了一些重要的内容，很高兴提供更多的代码片段。

Answer 1

仅运行this.setState（{whateverKey：whateverValue}）？

Answer 2

在活动页面（称为活动组件）中，您应该在每次浏览器点击该组件URL时调用API以获取更新的数据。

使用基于类的样式，您应该在componentDidMount生命周期挂钩中完成

class Activities extends Component {
  // ...
  componentDidMount() { loadActivities() }
  // ...
}

对于基于函数的样式，您应该使用useEffect钩子

import React, { useEffect } from 'react'

const Activities = () => {
  useEffect(() => { loadActivities() });
}

Answer 3

嗨，我必须迟到一点才能回答这个问题，但是这个问题可能是由于useEffect的错误使用引起的，如果让我们说一个待办事项列表，并且想用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)
      })
  })

希望这对某人有帮助，因为我因相同的问题而落在这里，并以此方式解决了该问题。

Answer 4

https://github.com/supasate/connected-react-router 请使用这个包，它解决了问题。

反应路由器-历史推送状态不刷新与新的状态对象

4 个答案: