反应检查为空

Question

当我在React中构建我的第一个应用程序时，我遇到了一些检查无效的问题。

这是构造函数

constructor() {
    super()
    this.state = {
      id: '',
      title: '',
      price: '',
      off_price: '',
      category_id: '',
      arttitle: '',
      artbody: '',
      shown: false,
      editDisabled: false,
      items: []
    }
    getAll = () => {
      const {
        categoryid
      } = this.props;
      getProducts(categoryid).then(data => {
        this.setState({
            title: '',
            price: '',
            off_price: '',
            category_id: this.props.categoryid,
            items: [...data]
          },
          () => {
            console.log(this.state.items)
          }
        )
      })
    }

这就是我列出所需内容的方式

{this.state.items.map((item, index) => ( 
... 
))}

现在我只有一个简单的div，仅当this.state.items为空时才需要显示。

Answer 1

由于items已被声明为处于状态的数组，因此您可以简单地测试其长度：

render() {

  if (!this.state.items.length) return <div>Items is null</div>

  return (
    <div>
      {this.state.items.map((item, index) => {...}
    </div>
  );

}