Избегайте повторения в похожих логических состояниях - PullRequest
Новая
       61

Избегайте повторения в похожих логических состояниях

0 голосов
/ 26 мая 2020

В моем приложении у меня есть два интерактивных текста с похожим поведением, которые управляют состояниями, которые содержат логическое значение для отображения или отсутствия модального окна в React Native. для управления этими состояниями всего две функции, которые я мог бы написать в строке, но я склеил их для организации 

  function toggleIsVisibleTeamA() {
    setIsVisibleTeamA(!isVisibleTeamA);
  }

  function toggleIsVisibleTeamB() {
    setIsVisibleTeamB(!isVisibleTeamB);
  }

Я знаю, что это не соответствует принципам DRY, и я не могу понять способ рефакторинга этого фрагмента кода какие-либо предложения? Я думал о том, чтобы сделать состояние объектом, но это сделало бы logi c более сложным, чем я предполагал. Цените это!

1 Ответ

1 голос
/ 26 мая 2020

Вместо двух отдельных состояний использует одно состояние в качестве объекта и передает ключ, который будет обновлен, в toggleIsVisibleFunction 

const [isVisible, setIsVisible] = useState({A: false, B: false});
...
function toggleIsVisibleTeam(team) {
    setIsVisible(prev=> ({
        ...prev,
        [team]: !prev[team]
    }));
}
...

 <View style={styles.resultContainer}>
        <View style={styles.teamContainer}>
          <TouchableOpacity style={styles.teamNameContainer} onPress={()=> toggleIsVisibleTeam('A')}>
            <Text style={styles.teamNameText}>Team A</Text>
          </TouchableOpacity>
          <View style={styles.teamResultContainer}>
            <Text style={styles.teamResultText}>0</Text>
          </View>
        </View>

        <Text style={styles.resultDivider}>x</Text>

        <View style={styles.teamContainer}>
          <TouchableOpacity style={styles.teamNameContainer} onPress={()=> toggleIsVisibleTeam('B')}>
            <Text style={styles.teamNameText}>Team B</Text>
          </TouchableOpacity>
          <View style={styles.teamResultContainer}>
            <Text style={styles.teamResultText}>0</Text>
          </View>
        </View>
      </View>

И где бы вы ни использовали isVisibleTeamA, вы бы теперь использовали isVisible.A

PS Вы можете улучшить визуализацию элементов JSX, отображая массив

...