javascript - 为什么会出现错误：React.Children.only 期望接收单个 React 元素子元素。？

Question

我想在 DetailPage 页面上集成 API，但是连接到 API 时出现错误 Error: React.Children.only expected to receive a single React element child。. 我一直在寻找错误在哪里，但仍然找不到。

这是代码详细信息页面

import React, { Component } from "react";
import { connect } from "react-redux";

import Header from "parts/Header";
import PageDetailTitle from "parts/PageDetailTitle";
import FeaturedImage from "parts/FeaturedImage";
import PagedetailsDescription from "parts/PageDetailsDescription";
import BookingForm from "parts/BookingForm";
import Categories from "parts/Categories";
import Testimony from "parts/Testimony";
import Footer from "parts/Footer";

import ItemDetails from "json/itemDetails.json";
import { checkoutBooking } from "store/actions/checkout";
import { fetchPage } from "store/actions/page";

class DetailsPage extends Component {
  componentDidMount() {
    window.title = "Details Page";
    window.scrollTo(0, 0);

    if (!this.props.page[this.props.match.params.id])
      this.props.fetchPage(
        `${process.env.REACT_APP_HOST}/api/v1/member/detail-page/${this.props.match.params.id}`,
        this.props.match.params.id
      );
  }

  render() {
    const { page, match } = this.props;
    const breadcrumb = [
      { pageTitle: "Home", pageHref: "" },
      { pageTitle: "House Details", pageHref: "" },
    ];
    console.log(page);
    if (!page[match.params.id]) return null;
    return (
      <React.Fragment>
        <Header {...this.props} />
        <PageDetailTitle breadcrumb={breadcrumb} data={page[match.params.id]} />
        <FeaturedImage data={page[match.params.id].imageId} />
        <section className="container">
          <div className="row">
            <div className="col-7 pr-5">
              <PagedetailsDescription data={page[match.params.id]} />
            </div>
            <div className="col-5">
              <BookingForm
                itemDetails={page[match.params.id]}
                startBooking={checkoutBooking}
              />
            </div>
          </div>
        </section>
        <Categories data={page[match.params.id].activityId} />
        <Testimony data={page[match.params.id].testimonial} />
        <Footer />
      </React.Fragment>
    );
  }
}

const mapStateToProps = (state) => ({
  page: state.page,
});
export default connect(mapStateToProps, { checkoutBooking, fetchPage })(
  DetailsPage
);

这是代码 page.js store/action/page.js

import axios from "axios";
import { FETCH_PAGE } from "../types";

export const fetchPage = (url, page) => (dispatch) => {
  return axios.get(url).then((response) => {
    dispatch({
      type: FETCH_PAGE,
      payload: {
        [page]: response.data,
      },
    });
  });
};

这是代码存储/reducers/page.js

import { FETCH_PAGE } from "../types";

const initialState = {};

export default function foo(state = initialState, action) {
  switch (action.type) {
    case FETCH_PAGE:
      return {
        ...state,
        ...action.payload,
      };

    default:
      return state;
  }
}

标签： javascriptreactjsjsx