避免在相似的布尔状态中重复

Question

在我的应用程序中，我有两个具有相似行为的可点击文本，它们正在管理状态，这些状态包含布尔值以在 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 原则，我想不出重构这段代码的方法，有什么建议吗？我想过让状态成为一个对象，但这会使逻辑比我猜想的更复杂。点赞！

Answer 1

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

P.S。您可以通过映射到数组

来呈现 JSX 元素，从而进一步改进

避免在相似的布尔状态中重复

Avoid repetition in similar boolean states

refactoring

reactjs

react-native

react-state