React Native - 挂钩 useState 空数组

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 != []总是评估为真。 如果要比较 arrays，则需要进行深入比较。 这篇文章可能会有所帮助： 如何比较 JavaScript 中的 arrays？

Answer 2

您使用的表达式始终返回true 。 这就是为什么你得到 A 为 output。

如果要在数组中没有元素时返回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 文档对比较运算符进行了以下说明：

比较的特点：

• 当两个字符串具有相同的字符序列、相同的长度和对应位置的相同字符时，它们是严格相等的。
• 当两个数字在数值上相等（具有相同的数值）时，它们是严格相等的。 NaN不等于任何东西，包括 NaN。 正零和负零彼此相等。
• 如果两个 Boolean 操作数都为true或都为false ，则它们是严格相等的。
• 对于严格或抽象比较，两个不同的对象永远不会相等。
• 仅当操作数引用相同的 Object 时，比较对象的表达式才为真。
• Null 和 Undefined Types 严格相等，抽象上彼此相等。

...

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

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

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

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

这使用了一个空数组的length 0的事实，这是错误的。 如果您更明确些， recommendations.length != 0会得到相同的结果。