代码之家 › 专栏 › 技术社区 › James

这是一个好的模式使用!!要侦听ReactJS更改的符号?

design-patterns reactjs javascript

James · 技术社区 · 6 年前

我在我的项目中采用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.post详细信息 尚未实例化,因此不包含数组,例如 author[] ,我得到 undefined 错误。

2 回复 | 直到 6 年前

T.J. Crowder 6 年前

一般来说,这与Javascript比React有更多的关系。

不,使用 !! 不是特别有用。这是:

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

与此相同:

if (this.props.postDetails.author) {

两者都不是 其中的一个意思是 author 包含一个数组,其中至少有一个条目是您的下一行代码所依赖的。为此,请添加 .length 或者,以你的具体例子来说,可能 [0] 相反(以防 作者 有一个条目,但该条目的值不稳定):

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

如果 作者 可能是 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] 当我们知道 作者 不会的 无效的 /不稳定:

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

双重检查示例 作者 可能是 无效的 /不稳定:

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)

tenor528 6 年前

在使用 !! 特别有用,但这不是上述情况。我发现最常见的情况是在评估是否要呈现数组项时。通常人们会使用数组的长度来决定是否使用它,因为 0 长度是错误的布尔值:

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

很遗憾,这将返回将在页面上呈现的0。自 false 不会呈现在页面上的一个好的选择是使用双爆炸,以便 错误 返回。

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