Question

我正在玩弄一个猫API来学习reactjs，但这个错误一直被抛出-我搜索了一段时间却没有发现。该错误一直指向L21，我在该处执行api请求并处理要声明的数据，我看不到是什么原因导致此操作无法正常工作？

我尝试过更改div等的片段。

我已经尝试过移动事物，进行解构，并且我机智！

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>
        )
    }
}

错误：

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

欢迎来到面包店！：D

看看您的渲染代码，您可以将其重新格式化为以下内容：

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 />
              )}
    )
}

这样，您的.map实际上会为每个项目返回一个片段。

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

1 个答案: