如何在ReactJs中从另一个组件提交表单后从另一个组件加载数据

Question

我有一个事件模型。在我的活动中，人们可以通过点击按钮来表明他们是否正在参加活动，当他们通过点击按钮来指示他们正在参加活动时，会弹出一个模态对话框，询问他们是否也想带朋友一起来参加活动，如果他们回答是，它将要求他们选择他们想要带多少人，他们将从数字下拉列表中选择并提交。在提交所有内容后，它将加上将要到来的人，以及该人将与多少人一起来，然后将他们一起显示出来。

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

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

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

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

请在沙箱https://pmmx6.csb.app/events/中使用此URL，只需在其他沙箱提供的URL后面添加events即可加载事件数据，因为事件的链接在沙箱中没有显示(我不知道为什么)

Answer 1

也许你可以使用事件发射器来解决这个问题。

使用

EventEmitter.subscribe('refresh', (event)=>this.refresh(event)) 

创建事件的步骤

当你想要执行它的时候，你可以使用

EventEmitter.dispatch('refresh', event)

分步创建eventEmitter：

• 创建eventEmitter.js文件：

const EventEmitter = {
  events: {},
  dispatch: function (event, data) {
    if (!this.events[event]) return;
    this.events[event].forEach(callback => callback(data))
    console.log("Dispatched: " + event)
  },
  subscribe: function (event, callback) {
    if (!this.events[event]) this.events[event] = [];
    this.events[event].push(callback)
    console.log("Subscribed: " + event)
  },
  unsubscribe: function(event) {
    if (this.events[event]) {
      delete this.events[event]
    }
    console.log("Unsubscribed: " + event)
  }
};

module.exports = {EventEmitter};

• 在要刷新的组件中，首先导入eventEmitter.js。例如：

import {EventEmitter} from "./tools/eventEmitter";

订阅，然后使用()创建事件：

EventEmitter.subscribe('refresh', (event)=>this.refresh(event)) 

其中，refresh是在调度事件时将执行的函数

最后，如果要刷新组件，请使用.dispatch():

EventEmitter.dispatch('refresh', event)

这将执行this.refresh()第一个组件函数

如果你想看看，https://medium.com/@lolahef/react-event-emitter-9a3bb0c719是一个很好的事件发射器的页面

Answer 2

谢谢大家，我已经解决了这个问题，只需在API调用后添加events即可。我在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]);