javascript - 如何从 ReactJS setState 中查找对象数组的长度？

Question

我无法找到/打印由 ReactJS setState 设置的对象数组的长度。我的component.js如下

import React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          loading: true,
          error: false,
          items: []
        };
    }
    componentDidMount() {
        fetch('http://localhost:8000/api/v2/pages/1')
        .then(response => response.json())
        .then(data => this.setState({ items: data }));
    }

    render() {
        console.log(this.state.items.content.length); // Gives error that says this.state.items is not defined
        return (
            <React.Fragment>
            </React.Fragment>
        );
    }
}

export default MyComponent;

当我控制台记录 this.state.items 我得到以下对象

{
    "id": 12,
    },
    "title": "My Title",
    "content": [
        {
            "type": "full_richtext",

            "id": "6e971101"
        },
        {
            "type": "button",
            "id": "c0f6083d"
        }
    ]
}

我想要实现的是获取 setState 设置的对象内数组“content”的长度。

背景故事:

我的目标是通过在 render() 中编写如下条件来处理 setState 的异步特性

if(this.state.items.content.length > 0){
  //access values from this.state.items
}

因此当条件为真时，值是只读的，即我们在对象内部有值。

Answer 1

因为 this.state.items 开始时是一个空数组(这很奇怪，因为后来它看起来像一个对象)你首先需要确保 this.state。 items.content 已定义

这样做:

console.log(this.state.items.content && this.state.items.content.length);

或者在你的实际情况下

if(this.state.items.content && this.state.items.content.length > 0){
    //access values from this.state.items
}

希望对你有帮助