时间戳

首页 > 解决方案 > 在 React Native 中使用三元运算符和 useState

javascript - 在 React Native 中使用三元运算符和 useState

问题描述

我的代码中有三元运算符的问题

  1. I 2 状态在按下按钮时保持真/假：

在这里（对不起，我在块代码中格式化它时遇到问题）

const [lineChecked, setLineChecked] = useState(false);
const [pieChecked, setPieChecked] = useState(false);

这是带有 onPress 的 Touchable Opacity，我指定将 1 状态转为 true，将其他状态转为 false（我有 2 个 - 另一个相反）：

<TouchableOpacity
      onPress={() => {
        setPieChecked(true);
        setLineChecked(false);
      }}
    >

我想要完成的是，当我按下 1 个可触摸的不透明度图形 X 时，将显示另一个图形，当我按下另一个可触摸的不透明度时，将呈现另一个图形，初始状态是没有任何图形被呈现。

这是我尝试过的：

 <View style={styles.graphsPart}>
    {lineChecked == "true" ? (
      <LineChart
        data={data}
        width={screenWidth - 10}
        height={220}
        chartConfig={chartConfig}
        yAxisLabel="₪&quot;
      />
    ) : null}
    {pieChecked == "true" ? (
      <LineChart
        data={dataTwo}
        width={screenWidth - 10}
        height={220}
        chartConfig={chartConfig}
        yAxisLabel="₪&quot;
      />
    ) : null}
  </View>

建议？？

标签： javascriptreact-nativeconditional-operatoruse-state

解决方案

(true == 'true') === false

您需要与布尔值 ( true) 进行比较，而不是字符串 ( 'true')。

更好的是，您可以检查一般真实性：

const val = true

const result = val ? 'yes' : 'no'
// if val is a boolean, this will work the same as
// `val === true ? 'yes' : 'no'`

推荐阅读