React.Children.only只希望收到一个React元素chil

Question

I'm toying around trying to get a cat API to work learning reactjs, this error keeps being thrown - I've searched a while to no prevail. The error keeps pointing to L21 where I do an api request to and process the data to state, I can't see what would cause this to fail as was working previously?

I've tried changing fragments for divs etc.

I've tried moving things around, deconstructing and I am at my ends wit!

import React, { Component } from 'react'
import Loading from '../Home/Loading'
import { BrowserRouter as Link } from "react-router-dom";

import { Col } from 'react-bootstrap'

const API_BREEDS = 'https://api.thecatapi.com/v1/breeds'

export default class BreedList extends Component {
    constructor() {
        super();
        this.state = {
            breeds: [],
            isLoading: true,
            error: null,
        };
    }
    fetchBreeds() {
        fetch(API_BREEDS)
            .then(response => response.json())
            .then(data =>
                this.setState({
                    breeds: data,
                    isLoading: false,
                }))
            .catch(error => this.setState({ error, isLoading: false }));
    }
    componentDidMount() {
        this.fetchBreeds();
        // console.log(this.state)
    }
    render() {
        const { isLoading, breeds, error } = this.state;
        return (
            <React.Fragment>
                {error ? <p>{error.message}</p> : null}
                {!isLoading ? (
                    breeds.map(feline => {
                        const { id, name } = feline;
                        return (<Col key={id} md={4} className="card p-2" >
                                <Link to={"/api/" + id}>{name}</Link>
                            </Col>
                        );
                    })
                ) : (
                        <Loading />
                    )}
            </React.Fragment>
        )
    }
}

Error:

Uncaught Error: React.Children.only expected to receive a single React element child.
    at invariant (react.development.js:105)
    at Object.onlyChild [as only] (react.development.js:1287)
    at Router.render (Router.js:118)
    at finishClassComponent (react-dom.development.js:15141)
    at updateClassComponent (react-dom.development.js:15096)
    at beginWork (react-dom.development.js:15980)
    at performUnitOfWork (react-dom.development.js:19102)
    at workLoop (react-dom.development.js:19143)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:18350)
    at renderRoot (react-dom.development.js:19261)
    at performWorkOnRoot (react-dom.development.js:20165)
    at performWork (react-dom.development.js:20075)
    at performSyncWork (react-dom.development.js:20049)
    at requestWork (react-dom.development.js:19904)
    at scheduleWork (react-dom.development.js:19711)
    at Object.enqueueSetState (react-dom.development.js:12936)
    at BreedList.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:356)
    at BreedList.js:21

Answer 1

Welcome to the boards Bread! :D

Looking at your render code, you could probably reformat it to something like this:

render() {
    const { isLoading, breeds, error } = this.state;
    return (
           {error ? <p>{error.message}</p> : null}
           {!isLoading ? (
                breeds.map(feline => {
                    const { id, name } = feline;
                    return (
                       <React.Fragment key={id}>
                           <Col md={4} className="card p-2" >
                               <Link to={"/api/" + id}>{name}</Link>
                           </Col>
                       </React.Fragment>
                    );
                })
            ) : (
               <Loading />
              )}
    )
}

That way your .map is actually returning a fragment for each item.