Question

我在本地反应器中使用Picker。打开屏幕时，设备将扫描ble设备，并将它们添加到状态为devices的阵列中。选择器应该为devices数组中的每个值选择一个选项。

通常，我会这样做：

构造函数：

this.state = { devices: [] };

找到设备后：

let devices = this.state.devices;
devices.push(device.id);
this.setState({ devices: devices });

然后像这样进行选择器：

<Picker>
  {(this.state.devices).map((item, index) => {
    return <Picker.item key={index} label={item} value={item} />;
  })}
</Picker>

这正常工作，但由于设备会不断被重新发现，因此它们会多次出现在阵列中。这不仅没有用，而且数组长度会增加，直到应用程序内存不足为止。

要解决此问题，我尝试使用一个集合，因为该集合不应自动包含重复项：

构造函数：

this.state = { devices: new Set() };

找到设备后：

let devices = this.state.devices;
devices.add(device.id);
this.setState({ devices: devices });

选择器：

由于该集合没有映射功能，因此我获取了条目（迭代器），并将其转换为数组，然后将其映射：

<Picker>
  {Array.from(this.state.devices.entries).map((item, index) => {
    return <Picker.item key={index} label={item} value={item} />;
  })}
</Picker>

这不起作用。调试工具建议永远不要将状态集添加进去，所以我认为这是问题所在（而不是选择器），但我不知道为什么会这样。

没有引发错误。

Answer 1

您可能想先检查一下，然后再放入阵列中，以避免重复输入，

let devices = this.state.devices;
if(devices.indexOf(device.id) == -1){
  devices.push(device.id);
  this.setState({ devices: devices });
}

这肯定不会推送已经处于状态的deviceID。

响应本机-添加发现的ble设备进行设置，并向选择器添加选项

1 个答案: