时间戳

首页 > 解决方案 > 当窗口变量在反应中发生变化时如何更新状态

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

问题描述

我有一个相当简单的类组件，它需要从用 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 外部更新组件状态（在服务器响应上）

标签： javascriptreactjs

解决方案

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

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

在组件渲染中添加这个

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

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

推荐阅读