Я начал учиться реагировать, создав новое приложение класса, которое расширяет Компонент, но мне было трудно понять концепцию, такую как приведенные ниже коды, но я не уверен, как мне обернуть коды компонентом расширенного класса и методы, которые возвращают ошибку как «App», определены, но никогда не использовали no-unused-vars. Спасибо заранее за вашу помощь и объяснение!
Приложение. js
import React, {
useState,
useEffect,
Component,
} from 'react';
import PokemonList from './PokemonList'
import axios from 'axios'
import Pagination from './Pagination';
import './App.css';
function App() {
const [pokemon, setPokemon] = useState([])
const [currentPageUrl, setCurrentPageUrl] = useState("https://pokeapi.co/api/v2/pokemon")
const [nextPageUrl, setNextPageUrl] = useState()
const [prevPageUrl, setPrevPageUrl] = useState()
const [loading, setLoading] = useState(true)
useEffect(() => {
setLoading(true)
let cancel
axios.get(currentPageUrl, {
cancelToken: new axios.CancelToken(c => cancel = c)
}).then(res => {
setLoading(false)
setNextPageUrl(res.data.next)
setPrevPageUrl(res.data.previous)
setPokemon(res.data.results.map(p => p.name))
})
return () => cancel()
}, [currentPageUrl])
function gotoNextPage() {
setCurrentPageUrl(nextPageUrl)
}
function gotoPrevPage() {
setCurrentPageUrl(prevPageUrl)
}
if (loading) return "Loading..."
if (loading) return "Loading..."
return ( <>
<PokemonList pokemon = {
pokemon}/> <
Pagination gotoNextPage = {
nextPageUrl ? gotoNextPage : null
}
gotoPrevPage = {
prevPageUrl ? gotoPrevPage : null
}/> </>
);
}
export default App;
Я пытаюсь добавить расширение класса компонента и визуализированного метода с вложенными элементами, как показано ниже, чтобы я мог сделать немного стайлинга,
class App extends Component {
constructor() {
super();
this.state = {};
}
render() {
return (
<div className="App">
</div>
);
}
}