当 window 变量在反应中发生变化时，如何更新 state

Question

我有一个相当简单的 class 组件，它需要从用 vanilla JS 编写的服务访问一些数据。 它只是 Web MIDI API 的接口，必须访问 MIDI 端口，然后触发回调。 我正在将 function 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: [],
    };
  }
......

编辑 -

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

从 React 外部更新组件 state（在服务器响应上）

Answer 1

感谢大家的建议，我设法按照这里所说的来解决它。

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

在组件渲染中添加这个

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

然后我能够在组件内部定义 setMidiPorts function 并使用window.Preferences.setMidiPorts从任何地方调用它