当窗口变量在反应中发生变化时如何更新状态答案

【问题标题】：How do I update state when a window variable changes in react当窗口变量在反应中发生变化时如何更新状态
【发布时间】：2021-01-23 23:17:27
【问题描述】：

我有一个相当简单的类组件，它需要从用 vanilla JS 编写的服务访问一些数据。它只是 Web MIDI API 的一个接口，必须访问 MIDI 端口，然后触发回调。我将函数 setMidiPorts 导入 MIDI 服务，然后调用它并发送 MIDI 成功的端口列表。然后我需要在下拉列表中呈现这些端口，但似乎无法在组件中更新它们。我尝试将它们作为来自父母的道具传递下来，我尝试直接导入它们。似乎没有任何效果。我对反应很陌生，所以我可能做错了什么，任何人都可以通过指出我哪里出错来帮助我。

window.inputs = [];

export const setMidiPorts = (inputs) => {
  window.inputs = inputs;
  console.log(inputs);
};

export default class Preferences extends Component {
  constructor(props) {
    super(props);
    this.state = {
      midiInputs: window.inputs,
      midiOutputs: [],
    };
  }
......

编辑-

我正在查看这个问题，看看我是否可以从外部更新状态，但不明白它是如何正常工作的。

Update component state from outside React (on server response)

【问题讨论】：

有一个MIDIAccess.onstatechange 事件可以监听。
是的，你应该用它制作一个自定义挂钩并轻松收听，如果你不知道，请搜索自定义挂钩。
MIDIAccess.onstatechange 不适用于compatibility。有关可能的选项，请参阅此问题：Listening for variable changes in JavaScript
@pilchard 整个 API 是实验性的。记住这一点总是好的。
感谢您的建议，我如何将 MIDIAccess 放入 react 组件中，尽管它目前在外面并且调用 setMidiPorts

标签： javascript reactjs

【解决方案1】：

感谢大家的建议，我按照这里所说的解决了这个问题。

https://brettdewoody.com/accessing-component-methods-and-state-from-outside-react/

在组件渲染中添加这个

ref={(Preferences) => {window.Preferences = Preferences;}}

然后我可以在组件内定义 setMidiPorts 函数，并使用window.Preferences.setMidiPorts从任何地方调用它

【讨论】：

你能在这里写完整的代码吗，我需要同样的东西？
老实说，最后我转换为功能组件，只是在需要的地方传递了 useState 的更新功能。我在这里所做的做法非常糟糕。