Блог

Я пытаюсь включить дочерний компонент в свой основной компонент, и он возвращает: «Ошибка: объекты недопустимы как дочерние элементы React (найдено: Пт Дек 11 2020 16:57:58 GMT-0600 (центральное стандартное время)). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив. »

Основной компонент:

 import React, { useState, useEffect, useReducer } from 'react';

// More imports


function Reports() {
    const [reports, dispatchReport] = useReducer(reportReducer, { reports: []});
    const [runReport, setRunReport] = useState(false);
    // More useStates    

    useEffect(() => {
        (async () => {
            const data = await reportsApi.getReports();
            dispatchReport({ type: 'GET_REPORTS', payload: data});
        })();
    }, []);

    // Some helper functions 

    const content = () => {
        if(!runReport)  return (<h2>Select a Report</h2>);
        // The idea here is to load the component for the selected report
        switch (selectedReport.toString()) {
            case '54':
                return <ApplicationSummary propertyID={pID} startDate={startDate} endDate={endDate} />
            default:
                return (<h2>Select a Report</h2>);
        }
    }

    return (
        <div>
            <ReportForm 
                startDate={startDate}
                endDate={endDate}
                reports={reports.reports}
                selectedReport={selectedReport}
                onUpdStartDate={updateStartDate}
                onUpdtEndDate={updateEndDate}
                onUpdSelectedReport={updSelectedReport}
                onUpdRunReport={updRunReport}
            />

            <div style={{display: 'flex', justifyContent: 'center'}}>
                {content()}
            </div>
        </div>
    );
}

export default Reports;
 

ReportForm — это просто компонент для запуска / отправки отчета.

Затем ApplicationSummary компонент:

 import React, { useState, useEffect } from 'react';
import * as reportsApi from '../../api/reports';

function ApplicationSummary(props) {
    const [reportData, setReportData] = useState([]);
    
    useEffect(() => {
        (async () => {
            const data = await reportsApi.getApplicationSummary({
                propertyID: props.propertyID,
                startDate: props.startDate.toISOString().split('T')[0],
                endDate: props.endDate.toISOString().split('T')[0],
            });
            setReportData(data);
        })();
    }, [props.propertyID, props.startDate, props.endDate]);

    return (
        <div id="1099Report">
            <h3>Application Summary - Date Range of Report: {props.startDate} to {props.endDate}</h3>

            <table className="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Tenant</th>
                        <th>Applied Date</th>
                        <th>Current Status</th>
                        <th>Lead Source</th>
                    </tr>
                </thead>
                <tbody>
                    {reportData.map((values, index) => {
                        const prospectStartDate = new Date(values.ProspectStartDate);
                        return (
                            <tr key={index}>
                                <td>{values.tenantFname} {values.tenantLName}</td>
                                <td>{prospectStartDate.toISOString().split('T')[0]}</td>
                                <td>{values.Description}</td>
                                <td>{values.LeadSource}</td>
                            </tr>
                        );
                    })}
                </tbody>
            </table>
        </div>
    );
}

export default ApplicationSummary;
 

Всякий раз, когда я выбираю ApplicationSummary отчет / компонент, он возвращает: «Ошибка: объекты недопустимы в качестве дочернего элемента React (найдено: Пт Дек 11 2020 16:57:58 GMT-0600 (центральное стандартное время)). Если вы хотели отобразить коллекцию дочерних элементов, вместо этого используйте массив. »

Есть идеи, что не так?

Спасибо

Просто преобразуйте даты в строки перед их выводом:

 <h3>Application Summary - Date Range of Report: {props.startDate.toISOString()} to {props.endDate.toISOString()}</h3>