如何在Reactjs中从另一个组件更新组件后加载该组件的新数据

Question

我有一个事件模型。在我的活动中，人们可以通过单击按钮来指示他们正在参加活动，当他们通过单击按钮来指示他们正在参加活动时，会从不同的组件中弹出一个模态对话框，询问他们是否也想带朋友一起来参加活动，如果他们说是，它将要求他们选择他们想要带多少人，他们将从数字下拉列表中选择并提交。在提交所有内容后，它将加上将要到来的人，以及该人将与多少人一起来，然后将他们一起显示出来。事件模型具有of和coming_with属性，用于保存即将到来的人和将要到来的人的数据。

注意:模式对话框来自我的Event组件中需要的另一个组件。

我现在面临的问题是，我的视图只更新即将到来的人，而不会更新此人带来的人数，除非我刷新页面。当我使用基于类的组件时，这是有效的，但在将我的代码更改为基于函数的组件后，它停止工作。

如何让浏览器在不刷新页面的情况下自动更新它？

这是我的沙盒链接，https://codesandbox.io/s/compassionate-sanne-pmmx6?file=/event-comments.component.js

我想你在访问了这个网站之后就会明白我的意思了。

Answer 1

将Redux存储集成到React应用程序中。

解决方案:1个

从API获取事件数据，然后将其存储在reducer中。使用该缩减程序在主屏幕上显示数据。

在模式出现后，无论您选择什么数据并将其发布到api上，也要在本地更新您的reducer。由于reducer将链接到主页，因此数据将是Updated。

解决方案:2个

在reducer中引入一些变量，比如isUpdate，让它在从Modal更新数据时成为现实。在您的主事件页面中，按如下所示使用Hook再次从api获取数据，因此将显示更新后的数据。

useEffect(() => {
 if(isUpdate) 
 // fetchDataFromAPI
},[])

Answer 2

谢谢大家，但是我已经在API调用之后通过事件解决了这个问题。我在React Facebook页面上看到了这个例子。

const [events, setEventData] = useState([]);

 useEffect(() => {
axios
  .get(
    "https://cryptic-shelf-72177.herokuapp.com/events/" +
      props.match.params.id +
      "/eventcomments"
  )

  .then((response) => {
    setEventData(response.data);
  })

  .catch(function (error) {
    console.log(error);
  });
}, [events]);