条件渲染始终为假

Question

我有一个负责显示类别列表的组件。 在其中，我声明了一个名为“ thereAreCategories”的const，当从Categories组件传递任何类别时，它应该为true。 目前，它始终是错误的，并显示“请添加新类别”段落。

render() {
        const { categories } = this.props;
        const thereAreCategories = categories.length > 0
        return (

            <div className="category-list">
                {
                    thereAreCategories ?

                            <ul>
                                {categories.map(category =>
                                    < li
                                        key={category.id}
                                        onClick={() => this.toggle(category.id)}
                                        style={!category.isToggled ?
                                            { borderColor: '' } : { border: '2px solid red' }}>
                                        {category.term}
                                    </li>)}
                            </ul>

                        :

                            <p>Plese add a new category</p>

                }

                <button onClick={this.logProps}>Props</button>
            </div>
        );
    }

状态位于“类别”组件中。