當我使用該方法slice()時，我得到：“TypeError: Cannot read properties of null (reading 'slice')”。而當我洗掉方法slice()時，口袋妖怪卡片會呈現為串列。不幸的是，我確實需要這種方法來創建分頁。有沒有等價的slice()？還是我做錯了什么？
import React, { Component } from 'react'
import axios from 'axios'
import ReactPaginate from 'react-paginate';
import PokemonCard from './PokemonCard';
export default class PokemonList extends Component {
state = {
url: "https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0",
pokemon: null, // on créé un objet (qui va devenir un tableau) pokemon null c'est où on va enregistrer le json
pageNumber: 1,
pokemonsPerPage: 16
};
async componentDidMount() {
const res = await axios.get(this.state.url);
console.log(res.data['results']);
this.setState({pokemon: res.data['results']});
};
render() {
console.log(this.state.pokemon);
const pagesVisited = this.state.pageNumber * this.state.pokemonsPerPage;
const displayUsers = this.state.pokemon
.slice(pagesVisited, pagesVisited this.state.pokemonsPerPage)
.map((pokemon) => {
return (
<PokemonCard
key={pokemon.name}
name={pokemon.name}
url={pokemon.url}
/>
)
})
return (
<React.Fragment>
{this.state.pokemon ? (
<div className='row'>
{displayUsers}
</div>
) : (<h2>Loading Pokemon</h2>)}
</React.Fragment>
)
}
}
uj5u.com熱心網友回復：
問題是在您的初始狀態下，您將“口袋妖怪”設定為空。'null' 上不存在方法 slice()。您應該在初始狀態下將 'pokemon' 設定為一個空陣列，或者在切片之前添加一個檢查以確保它不為空。
uj5u.com熱心網友回復：
你只需要將口袋妖怪的初始狀態設定為一個空陣列
像這樣：
state = {
url: "https://pokeapi.co/api/v2/pokemon?limit=100000&offset=0",
pokemon: [], // on créé un objet (qui va devenir un tableau) pokemon null c'est où on va enregistrer le json
pageNumber: 1,
pokemonsPerPage: 16
};轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/503805.html
標籤：javascript 反应 api
上一篇：提交后在陣列中添加物件