React Native 中的开关案例

Question

大家好，我正在尝试使用 switch case 在用户从列表中选择文本后更新文本。我对本机反应不是很熟悉，所以不确定我是否遗漏了一些简单的东西。我很感激 help/feedback。如果我可以提供任何额外信息，请告诉我。谢谢！

        <ProfilePropertyInfoCompact
          style={{ marginBottom: 17 }}
          fieldName={translations['edituserprofile.size']}
          value={userSize ? userSize : translations['unknown']}
          onPress={() => {
            setModalData({
              options: [
                translations['xx-small.weight'],
                translations['x-small.weight'],
                translations['small.weight'],
                translations['medium.weight'],
                translations['large.weight'],
                translations['x-large.weight'],
                translations['xx-large.weight'],
                translations['xxx-large.weight'],
              ],
              fieldName: translations['edituserprofile.size'],
              modalTitle: translations['edituserprofile.size'],
              selected: userSize,
              onModalSelect: (item) => {
                switch (item) {
                  case translations['xx-small.weight']:
                    return translations['xx-small'];
                  case translations['x-small.weight']:
                    return translations['x-small'];
                  case translations['small.weight']:
                    return translations['small'];
                  case translations['medium.weight']:
                    return translations['medium'];
                  case translations['lalrge.weight']:
                    return translations['large'];
                  case translations['x-large.weight']:
                    return translations['x-large'];
                  case translations['xx-large.weight']:
                    return translations['xx-large'];
                  case translations['xxx-large.weight']:
                    return translations['xxx-large'];
                  default:
                    '';
                }
                setuserSize(item);
                setIsModalOpen(false);
              },
            });
            setIsModalOpen(true);
          }}
        />

Answer 1

我发现 switch 语句阻止了项目被 setuserSize 设置。为了解决这个问题，我创建了一个函数并使 item 等于函数并传入 item.

const sizeTranslationMap = (weightRange) => {
    switch (weightRange) {
      case translations['xx-smallweight']:
        return translations['xx-small'];
      case translations['x-smallweight']:
        return translations['x-small'];
      case translations['smallweight']:
        return translations['small'];
      case translations['mediumweight']:
        return translations['medium'];
      case translations['largeweight']:
        return translations['large'];
      case translations['x-largeweight']:
        return translations['x-large'];
      case translations['xx-largeweight']:
        return translations['xx-large'];
      case translations['xxx-largeweight']:
        return translations['xxx-large'];
      default:
        return '';
    }
  };

onModalSelect: (item) => {
                item = sizeTranslationMap(item);
                setuserSize(item);
                setIsModalOpen(false);
              },

React Native 中的开关案例

Switch Cases in React Native

if-statement

switch-statement

react-native