javascript - 如果使用 React 对象数组为空，如何显示消息？

Question

如果对象是否包含数据，我想显示一条消息。目前我将数据存储在名为“数据”的状态中，并最初将其设置为空。

从服务器获取请求后，将返回的数据存储到数据状态。如果数据状态未定义，我会显示一条消息“无信息”。如果信息有一些值(value)，那么我会显示一条消息“信息可用”。

如果有数据，这个数据状态如下所示，

data = [
          { attributes: [],
            info: 'some info',
            meshes: [],
          }
          {attributes: [],
           info: 'someinfo2',
           meshes: [],
           }
           .....so on.... 

       ]

以上没问题..并显示消息“信息可用”

现在，如果数据状态中每个对象的信息为空，则应显示“无信息”。所以状态看起来像下面，

  data = [
          { attributes: [],
            info: '',
            meshes: [],
          }
          {attributes: [],
           info: '',
           meshes: [],
           }
           .....so on.... 
          ]

如何检查数据状态中的每条信息是否为空？

下面是根据已定义或未定义的数据状态显示消息的代码...

{this.loading ? (
    <div className="spinner"/>) : (
        !this.data ? (
            <div>No info.</div>) :
                (<div>Info available</div>)
        )
    )
)}

谁能帮我解决这个问题。谢谢。

Answer 1

您可以使用 some 方法检查是否至少有一些信息不为空。可能是这样的:

if (this.loading) {
  return (
    <div className="spinner"/>
  )
}

if (this.data && this.data.some((item) => item.info)) {
  return (
    <div>Info available</div>
  )
}

return (
  <div>No info.</div>
)

_{(为了便于阅读，我拆分了三元)。}

这里我使用Array.prototype.some - 因此，如果设置了至少一个 信息，则表示“信息可用”。如果您需要设置所有信息项，请使用this.data.every((item) => item.info)。