Question

在React Native中考虑以下代码：

import React, { useState } from 'react';
import { Text, View } from 'react-native';

export default function App() {
  const [recommendations, setRecommendation] = useState<any[]>([]);
  return (
    <View>
      {recommendations != [] ? 
      (
        <Text>A</Text>
      ) : (
        <Text>B</Text>
      )}
    </View>
  );
}

当前，它总是返回A，从不输入B。为什么？

Answer 1

简而言之

，因为条件recommendations != []始终为true。如果要比较数组，则需要进行深层比较。本文可能会有所帮助：How to compare arrays in JavaScript?

Answer 2

您使用的表达式始终返回true。这就是为什么将A作为输出的原因。

如果要在数组中没有元素时返回B，而在数组中没有元素时返回A，则可以使用数组的长度来实现。

import React, { useState } from 'react';
import { Text, View } from 'react-native';

export default function App() {
  const [recommendations, setRecommendation] = useState<any[]>([]);
  return (
    <View>
      {recommendations.length ? 
      (
        <Text>A</Text>
      ) : (
        <Text>B</Text>
      )}
    </View>
  );
}

Answer 3

MDN文档中有关comparison operators的内容如下：

比较功能：

两个字符串在具有相同的字符序列，相同的长度和相应的相同字符时严格相等职位。

两个数字在数值上相等（具有相同的数字值）时严格相等。 NaN不等于任何东西，包括NaN。正零和负零彼此相等。

如果两个布尔操作数都为true或都为false，则两个布尔操作数严格相等。

对于严格比较或抽象比较，两个不同的对象永远都不相等。

仅当操作数引用同一对象时，比较对象的表达式才为真。

空类型和未定义类型严格地彼此相等，抽象上彼此相等。

...

如果两个操作数都是对象，则JavaScript比较内部引用，当操作数引用内存中的不同对象时，内部引用不相等。

通过引用比较对象。数组也是一个对象。这意味着[] == []始终会产生false，因为它们不是完全相同的对象（具有相同的引用）。这也意味着出于同样的原因，[] != []将始终为true。

如果要检查是否为空数组，请使用length属性：

<View>
  {recommendations.length ? 
  (
    <Text>Not Empty</Text>
  ) : (
    <Text>Empty</Text>
  )}
</View>

这利用了一个事实，即一个空数组具有length 0，这是虚假的。如果您更明确一些，recommendations.length != 0的结果将相同。

React Native-钩住useState空数组

3 个答案: