时间戳

首页 > 解决方案 > 避免在类似的布尔状态中重复

reactjs - 避免在类似的布尔状态中重复

问题描述

在我的应用程序中，我有两个具有相似行为的可点击文本，它们正在管理状态，这些状态包含一个布尔值以显示或不显示 React Native 中的模态。

      <View style={styles.resultContainer}>
        <View style={styles.teamContainer}>
          <TouchableOpacity style={styles.teamNameContainer} onPress={toggleIsVisibleTeamA}>
            <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={toggleIsVisibleTeamB}>
            <Text style={styles.teamNameText}>Team B</Text>
          </TouchableOpacity>
          <View style={styles.teamResultContainer}>
            <Text style={styles.teamResultText}>0</Text>
          </View>
        </View>
      </View>

我有相同的逻辑来管理这些状态，只有两个我可以内联编写的函数，但我为组织拼接了它

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

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

我知道这不遵循 DRY 原则，我想不出重构这段代码的方法有什么建议吗？我想把状态变成一个对象，但这会使我猜到的逻辑更加复杂。欣赏它！

标签： reactjsreact-nativerefactoringreact-state

解决方案

不是使用两个单独的状态，而是使用单个状态作为对象并将要更新的键传递给 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元素来进一步改进

推荐阅读