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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.