Question

我已经在我的项目中采用ReactJS + Redux两年了。我经常在异步情况下结束，在这种情况下，我需要组件等待状态被更新以呈现。通常，简单的逻辑!this.props.isFetching ? <Component /> : "Loading..."就足够了。

但是，在某些情况下，我需要检查嵌入在状态对象中的数组的状态。在这些情况下，我的大多数组件最终看起来都像这样：

  renderPostAuthor = () => {
    if (!!this.props.postDetails.author) {
      return this.props.postDetails.author[0].name;
    } else {
      return (
        <div>
          <StyledTitle variant="subheading" gutterBottom color="primary">
            Loading...
          </StyledTitle>
        </div>
      );
    }
  };

在ReactJS中使用!!表示法是一种好的模式/做法吗？

更新：感谢您的答复，它们都是有效的。也许，为了进一步阐明我的问题，请注意this.props.postDetails是一个状态本身，其中包含许多对象和数组。因此，问题在于，如果我省略了!!并且this.props.postDetails尚未实例化，因此不包含诸如author[]之类的数组，则会出现undefined错误。 / p>

Answer 1

一般而言，与JavaScript相比，它与React有着更多的关系。

否，使用!!并不是特别有用。这个：

if (!!this.props.postDetails.author) {

与此相同：

if (this.props.postDetails.author) {

都不是是指author包含一个至少包含一个条目的数组，您的下一行代码将依赖该数组。为此，请添加.length，或者在您的特定示例中添加[0]（如果author有一个条目，但该条目是虚假的值）：

if (this.props.postDetails.author[0]) {

如果author可能是null或undefined，我们需要做两项检查：

if (this.props.postDetails.author && this.props.postDetails.author[0]) {

由于我们将使用结果，因此最好将结果保存到变量或常量中：

const firstAuthor = this.props.postDetails.author && this.props.postDetails.author[0];
if (firstAuthor) {
    return firstAuthor.name;
}

当前代码抛出错误的示例：

console.log("Running");
const author = [];
if (!!author) {
  console.log(author[0].name);
} else {
  console.log("No Author");
}

当我们知道[0]不会author /虚假时检查null的示例：

console.log("Running");
const author = [];
if (author[0]) {
  console.log(author[0].name);
} else {
  console.log("No Author");
}

author可能为null /虚假时进行仔细检查的示例：

console.log("Running");
const author = null;
if (author && author[0]) {
  console.log(author[0].name);
} else {
  console.log("No Author");
}

保存和使用结果的示例：

function example(author) {
  const firstAuthor = author && author[0];
  if (firstAuthor) {
      return firstAuthor.name;
  } else {
      return "Loading...";
  }
}
console.log(example(null));                      // Loading...
console.log(example([]));                        // Loading...
console.log(example([{name:"Harlan Ellison"}])); // "Harlan Ellison" (RIP)

Answer 2

使用!!时特别有用，但这并不是上述情况。我发现的最常见情况是在评估是否要渲染数组项时。人们通常会使用数组的长度来决定是否使用它，因为0的长度是一个假布尔值：

render () {
  return this.props.array.length && <MyList items={this.props.array} />
}

不幸的是，这将返回将在页面上呈现的0。由于false不会在页面上呈现，一个很好的选择是使用双爆炸，以便返回false。

render () {
  return !!this.props.array.length && <MyList items={this.props.array} />
}

使用它是一个好模式吗！听ReactJS更改的符号吗？

2 个答案: