对象作为React子对象无效（找到：带有键{children}的对象）：ReactJS应用程序

Question

我不确定为什么会收到此错误：对象作为React子对象无效（找到：带有键{children}的对象）：ReactJS。

下面是我的孩子部分。

import React, { Component } from 'react';
import $ from "jquery";
import "../Dropdown/Dropdown.css"

class Dropdown extends Component {

  constructor(props) {
    super(props);
    this.state = {
      listOpen: false,
      headerTitle: "-"
    };
    this.close = this.close.bind(this);
  }

  componentDidUpdate() {
    const { listOpen } = this.state;
    setTimeout(() => {
      if (listOpen) {
        window.addEventListener("click", this.close);
      } else {
        window.removeEventListener("click", this.close);
      }
    }, 0);
  }

  componentWillUnmount() {
    window.removeEventListener("click", this.close);
  }

  close(timeOut) {
    this.setState({
      listOpen: false
    });
  }

  selectItem(title, id, stateKey) {
    console.log("ko" + id + stateKey + title);
    this.setState(
      {
        headerTitle: title,
        listOpen: false
      },
      this.props.resetThenSet(id, stateKey, title)
    );
  }

  toggleList = () => {
    console.log("hiiii");
    this.setState(prevState => ({
      listOpen: !prevState.listOpen
    }));
  }
  handleSelect(ranges) {
    console.log(ranges[0]._d.toISOString().slice(0, 10));
    console.log(ranges[1]._d.toISOString().slice(0, 10));
  }

  render() {
    const { list } = this.props;
    const { listOpen, headerTitle } = this.state;
    $(".example").click(function () {
      $("#examples").hide();
    });

    return (
      <div className="dd-wrapper">
        <div className="dd-header" onClick={this.toggleList}>
          <div className="dd-header-title">
            {this.props.title}{" "}
            <div style={{ color: "#00bdf2" }}>
              {headerTitle === "-" ? "" : headerTitle}
            </div>{" "}
          </div>
          {listOpen ? (
            {/* <FontAwesome name="angle-up" size="1g" /> */ }
          ) : (
              {/* <FontAwesome name="angle-down" size="1g" /> */ }
            )}
        </div>
        {listOpen && (
          <ul className="dd-list" onClick={e => e.stopPropagation()}>
            {list.map(item => (
              <li
                className="dd-list-item"
                key={item.id}
                onClick={() => this.selectItem(item.title, item.id, item.key)}
              >
                {item.title} {item.selected}
                {/* && <FontAwesome name="check" /> */}
                            }
              </li>
            ))}
            <hr style={{ borderColor: "#4e4949" }} />
            <span className="dd-list-item"> Custom Range</span>
          </ul>
        )}
      </div>
    );
  }
}

export default Dropdown;

父组件：

class DefectsContainer extends Component {

  state = {
    apicategory: [{
      id: 0,
      title: 'Advisor Ballot',
      selected: false,
      key: 'apicategory'
    }, {
      id: 1,
      title: 'Advisor IDs',
      selected: false,
      key: 'apicategory'
    }, {
      id: 2,
      title: 'Advisor Meeting',
      selected: false,
      key: 'apicategory'
    }]
  };

  render() {
    return (
      <div className="defect-filters">
        <Dropdown title="API Name" list={this.state.apicategory}> </Dropdown>
      </div>
    )

  }
}

以下是错误消息：

Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
    in div (at Dropdown.js:69)
    in div (at Dropdown.js:68)
    in Dropdown (at DefectsContainer.js:55)
    in div (at DefectsContainer.js:54)
    in div (at DefectsContainer.js:49)
    in div (at DefectsContainer.js:48)
    in div (at DefectsContainer.js:47)
    in DefectsContainer (created by Context.Consumer)

我试图弄清楚，但是做不到。我是新来的反应。有人可以帮忙哪里出错了。预先感谢！