Question

我一直在用这些基本的东西捣乱了一段时间，但我似乎无法让它发挥作用。

我从我们的后端获取数据，如果有任何交付对象，它将显示为：

<Expandable>
  <ObjectDisplay
    key={id}
    parentDocumentId={id}
    schema={schema[this.props.schema.collectionName]}
    value={this.props.collection.documents[id]}
  />
</Expandable>

但如果没有送货，我想显示there's no deliveries之类的信息。我可以使用.length和!deliveries（我明白了），但似乎我的条件不起作用：

render() {
  console.log(this.props.collection.ids.length) //Getting how many deliveries there are with their id
  return (
    <div>//Struggling with this:

      {!this.props.collection.ids && this.props.collection.ids.length < 1
        ? <p>No deliviers</p>
        : <div className="box">
            {this.props.collection.ids
              .filter(
                id =>
                  // note: this is only passed when in top level of document
                  this.props.collection.documents[id][
                    this.props.schema.foreignKey
                  ] === this.props.parentDocumentId
              )
              .map(id => {
                return (
                  <Expandable>
                    <ObjectDisplay
                      key={id}
                      parentDocumentId={id}
                      schema={schema[this.props.schema.collectionName]}
                      value={this.props.collection.documents[id]}
                    />
                  </Expandable>
                )
              })}
          </div>}
    </div>
  )
}

我打赌我的问题是超级基本的，但我无法让它工作..非常感谢帮助!!

Answer 1

更改您的＆amp;＆amp;到||。如果你没有id（第一次测试）或者你的ids.length是＆lt;你想要渲染“no deliver”。 1

Answer 2

你的问题似乎与你的病情有关。

!this.props.collection.ids && this.props.collection.ids.length < 1

!this.props.collection.ids仅在数组为假时才为真。然而，一个空阵列并不是虚假的 - 它是真实的。
this.props.collection.ids.length < 1为真。

由于您正在执行&&，因此您需要同时使用该数组并使其为空，这种情况永远不会发生。

只需将条件从&&更改为||即可。换句话说：

!this.props.collection.ids || this.props.collection.ids.length < 1

虽然我认为这更漂亮：

!this.props.collection.ids || !this.props.collection.ids.length

Answer 3

您的情况会引发错误。见这里

!this.props.collection.ids && this.props.collection.ids.length < 1
                       ^ 
                      !false && undefined

将您的条件更改为

this.props.collection.ids && this.props.collection.ids.length > 1

并将占位符放在三元组的else块中。

内联if-else，条件运算符不工作React

3 个答案: