按下时，多个Switch组件正在更改List元素中的顺序

Question

我有一个屏幕，用户可以在其中启用/禁用特定的推送通知。当用户按下拨动开关时，正确的拨动开关将被更改，并且状态将被更新。

我的问题是切换发生后，它执行了一些奇怪的排序。在此处观看视频（对视频质量感到抱歉，尝试使用以下命令执行该视频：）xcrun simctl io booted recordVideo toggle.mp4。

组件状态

state = {
    defaultNotifications: {
      config_error: { active: true, normalized: 'Notifiy on configuration error' },
      on_first_start: { active: true, normalized: 'Notifiy on first start' },
      on_trigger: { active: true, normalized: 'Notifiy on trigger' },
      on_panic_start: { active: true, normalized: 'Notifiy on panic start' },
      on_panic_end: { active: true, normalized: 'Notifiy on panic sell end' },
      order_placed: { active: true, normalized: 'Notifiy on order placed' },
      trade_completed: { active: true, normalized: 'Notifiy on trade completed' },
      order_cancelled: { active: true, normalized: 'Notifiy on order cancelled' },
    }
  }

切换功能

const enabledNotifications = [];
const stateNotifications = this.state.defaultNotifications;
Object.keys(stateNotifications).forEach((notification) => {
  if (stateNotifications[notification].active) {
    enabledNotifications.push(notification);
  }
});

我需要一个逗号分隔的字符串，后面带有POST请求的“活动”通知名称：

const requestBody = qs.stringify({
  player_id: this.state.playerId,
  permissions: enabledNotifications.toString()
}, { arrayFormat: 'comma', encode: false });

将切换开关更改为！active

toggleNotification = (notification) => {
    this.setState({ defaultNotifications: {
      ...this.state.defaultNotifications,
      [notification]: {
        ...this.state.defaultNotifications[notification],
        active: !this.state.defaultNotifications[notification].active,
      }
    } });
  };

切换JSX

    const userNotifications = this.state.defaultNotifications;

    return (
      Object.keys(userNotifications).map((notification) =>
        <ListItem
        key={notification}
        >
          <Image
            style={{ width: 24, height: 24 }}
            source={require('../../../assets/more_icons/notify_green.png')}
          />
          <Text style={styles.notificationText}>
            { userNotifications[notification].normalized }
          </Text>
          <Switch
             onValueChange={() => this.toggleNotification(notification)}
             value={userNotifications[notification].active}
             style={{ marginLeft: 'auto' }}
           />
        </ListItem>
      )
    );

我记得xcrun simctl erase all在发生此错误的几分钟前，我确实用清除了XCode Simulator缓存。但是我无法想到会导致任何相关问题的任何原因。

Answer 1

JavaScript 在迭代对象的属性时不保证属性的顺序。看到这个答案。因此，您无法确定密钥是否按照您现在预期的方式返回，这可能会导致渲染时发生随机变化。

因此，我的建议是在显示对象键之前主动对其进行排序。例如，要按字母顺序对它们进行排序：

Object.keys(userNotifications).sort().map((notification) => ...

或者，您可以使用自己设置的有序数组：

['config_error', 'on_first_start', 'on_trigger', 'on_panic_start', 'on_panic_end', 'order_placed', 'trade_completed', 'order_cancelled'].map(key => userNotifications[key]).map((notification) => ...