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

Question

我有一个相当简单的类组件，需要访问用 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: [],
    };
  }
......

编辑 -

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

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

Answer 1

谢谢大家的建议，我按照这里的说法成功解决了。

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

将其添加到组件渲染中

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

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