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: [],
    };
  }
......

编辑 -

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

Update component state from outside React (on server response)

Answer 1

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

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

在组件渲染中添加这个

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

然后我就能够在组件内部定义 setMidiPorts 函数，并使用 window.Preferences.setMidiPorts

从任何地方调用它

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

1 个答案: