我在这里有反应组件PokemonInfo,我想在这种情况下从stats.base_stat
json返回https://pokeapi.co/api/v2/pokemon/1/
。问题是base_stat
位于数组stats
内。我假设可以通过某种方式映射stats
数组,但是怎么做?
这就是我的目标,但似乎没有任何效果。
应用
import React, { Component } from "react";
import "./App.css";
import PokemonList from "./PokemonList";
import PokemonInfo from "./PokemonInfo";
class App extends Component {
constructor(props) {
super(props);
this.state = {
pokemon: {},
pokemons: [],
};
this.handleOnClick = this.handleOnClick.bind(this);
}
componentDidMount() {
fetch("https://pokeapi.co/api/v2/pokemon/")
.then(res => res.json())
.then(response => {
this.setState({
pokemons: response.results
});
});
}
handleOnClick(pokeurl) {
fetch(pokeurl)
.then(res => res.json())
.then(data => {
**// console.log("this is the `https://pokeapi.co/api/v2/pokemon/1/` JSON", data);**
//const infopokemon = new Pokemon(data);
this.setState({ pokemon: data });
})
.catch(err => console.log(err));
}
render() {
// if(this.state.pokemon)
//console.log("eto dannije kotorije nado vitashitj iz massiva",
this.state.pokemon.weight);
return (
<div className="App">
<PokemonList pokemons={this.state.pokemons} handleClick=
{(url)=>this.handleOnClick(url)} />
<PokemonInfo pokemon={this.state.pokemon}/>
</div>
);
}
}
export default App;
返回此值的正确方法是什么?在这种情况下究竟如何以及如何使用map()方法?
更新了PokemonInfo
import React, {Component} from 'react';
import './pokemon-info.css';
const PokemonInfo = ({ pokemon }) => {
const {
name,
height,
weight,
sprites,
} = pokemon;
const {sprites: {front_default}} = pokemon;
return (
<section className="pokemonInfo">
<img src={front_default} className='sprite-image'
alt="pokemon_sprite"/>
<div className='data-wrapper'>
<h3 className="data-char"><strong>{name}</strong></h3><br />
<p className = 'data-char'>Height: {height}</p>
<p className = 'data-char'>Weight: {weight}</p><br />
<p className = 'data-char'>Stats: </p><br />
{pokemon.stats.map((statInfo, i) => {
return <p className='data-char' key=
{i}>{statInfo.stat.name}: {statInfo.base_stat}</p>
})}
</div>
</section>
)
}
export default PokemonInfo;
答案 0 :(得分:0)
看起来只是语法错误。在PokemonInfo中,改变这个:
{this.props.pokemon.stats.map(speed => {
return <p className='data-char' speed={speed} key=
{speed.stat.name}>Speed: {stats.base_stat}</p>})}
到此:
{pokemon.stats.map(statInfo => {
return <p className='data-char' key=
{statInfo.stat.name}>{statInfo.stat.name}: {statInfo.base_stat}</p>
})}
注意:不要在功能组件中使用this
。如果您需要访问其余的道具而不会丢失您的解构,您可以使用其余的运算符:
const PokemonInfo = ({ pokemon }, ...props) => {
// use as props.otherProp
}
修改强>
为避免TypeErrors,我建议使用正确的密钥而不是空对象初始化pokemon
对象。在App中,您的初始状态应如下所示:
state = {
pokemons: [],
pokemon: {
name: "",
height: "",
weight: "",
stats: [],
sprites: {
front_default: "",
//other keys you might need
},
}
}
答案 1 :(得分:0)
由于this.props
被声明为功能组件,pokemon
将无效。并且您已经将传递的prop .map
的{{3}}完成到const变量,您可以直接执行stats
数组对象的stats
次迭代,如下面的代码所示。
当我们遍历base_stat
数组时,您可以从您的iteratee访问stats.base_stat
道具,这在您的情况下是“速度”。所以用speed.base_stat
替换import React, {Component} from 'react';
import './pokemon-info.css';
const PokemonInfo = ({ pokemon }) => {
const { name,
height,
weight,
stats,
} = pokemon;
return (
<section className="pokemonInfo">
<img className='sprite-image' alt="pokemon_sprite"/>
<div className='data-wrapper'>
<h3 className="data-char">{name}</h3><br />
<p className = 'data-char'>Height: {height}</p>
<p className = 'data-char'>Weight: {weight}</p><br />
<p className = 'data-char'>Stats: </p><br />
{stats.map(speed => {
return <p className='data-char' speed={speed} key=
{speed.stat.name}>Speed: {speed.base_stat}</p>})}
<p className = 'data-char'>Special defense: </p>
<p className = 'data-char'>Special attack: </p>
<p className = 'data-char'>Defense: </p>
<p className = 'data-char'>Attack: </p>
<p className = 'data-char'>Hp: </p>
</div>
</section>
)
}
export default PokemonInfo;
。
a=c('2017-05-15 09:28:38 GMT', '2017-05-16 14:02:19 GMT', '2017-05-20 03:02:49 GMT', '2017-05-21 17:40:47 GMT', '2017-05-23 20:23:47 GMT', '2017-05-24 21:01:07 GMT', '2017-05-26 12:50:18 GMT', '2017-05-27 05:39:55 GMT', '2017-05-30 03:56:31 GMT', '2017-06-01 15:44:49 GMT', '2017-06-02 17:07:06 GMT', '2017-06-05 19:01:09 GMT', '2017-06-07 16:14:02 GMT', '2017-06-08 16:51:22 GMT', '2017-06-11 14:51:42 GMT', '2017-06-11 19:41:17 GMT', '2017-06-14 20:59:10 GMT', '2017-06-17 18:32:42 GMT', '2017-06-17 19:13:10 GMT', '2017-06-24 22:14:49 GMT', '2017-06-27 20:50:54 GMT', '2017-06-27 23:42:34 GMT', '2017-07-06 17:36:37 GMT', '2017-07-10 23:39:39 GMT', '2017-07-18 03:05:25 GMT', '2017-07-20 16:59:55 GMT', '2017-07-24 03:57:07 GMT', '2017-08-13 20:15:11 GMT', '2016-11-21 15:35:23 GMT', '2016-11-23 20:24:24 GMT', '2016-11-24 16:30:47 GMT', '2016-11-24 21:54:08 GMT', '2016-12-02 17:07:12 GMT', '2016-12-05 19:10:26 GMT', '2016-12-06 11:00:45 GMT', '2016-12-06 23:35:13 GMT', '2016-12-09 00:58:07 GMT', '2016-12-19 01:41:55 GMT', '2016-12-19 21:58:19 GMT', '2016-12-22 16:42:25 GMT', '2016-12-23 05:50:15 GMT', '2016-12-24 10:10:42 GMT', '2016-12-24 13:51:36 GMT', '2016-12-25 12:53:51 GMT', '2016-12-27 21:26:21 GMT', '2017-01-04 07:37:26 GMT', '2017-01-04 15:08:49 GMT', '2017-01-05 16:10:41 GMT', '2017-01-06 04:19:33 GMT', '2017-01-06 23:18:08 GMT', '2017-01-09 16:52:27 GMT', '2017-01-12 18:20:21 GMT', '2017-01-13 10:49:40 GMT', '2017-01-13 18:54:39 GMT', '2017-01-22 13:25:32 GMT', '2017-01-23 06:31:25 GMT', '2017-01-23 19:26:42 GMT', '2017-01-23 21:17:51 GMT', '2017-01-25 07:21:29 GMT', '2017-01-25 19:13:47 GMT', '2017-01-28 11:41:20 GMT', '2017-01-29 07:48:43 GMT', '2017-01-30 21:31:50 GMT', '2017-01-31 08:42:57 GMT', '2017-02-03 22:37:24 GMT', '2017-02-04 15:33:58 GMT', '2017-02-04 19:22:24 GMT', '2017-02-07 04:14:46 GMT', '2017-02-09 02:42:09 GMT', '2017-02-11 18:26:45 GMT', '2017-02-12 14:15:23 GMT', '2017-02-16 12:35:03 GMT', '2017-02-16 21:46:43 GMT', '2017-02-20 12:30:13 GMT', '2017-02-20 14:22:10 GMT', '2017-02-22 08:53:34 GMT', '2017-02-22 19:56:49 GMT', '2017-02-22 22:43:13 GMT', '2017-02-22 23:14:48 GMT', '2017-02-27 14:19:04 GMT', '2017-02-28 18:21:30 GMT', '2017-03-02 19:06:14 GMT', '2017-03-02 22:29:09 GMT', '2017-03-03 04:39:49 GMT', '2017-03-03 22:33:46 GMT', '2017-03-07 06:47:34 GMT', '2017-03-07 09:25:16 GMT', '2017-03-08 12:44:21 GMT', '2017-03-08 23:40:59 GMT', '2017-03-10 21:39:40 GMT', '2017-03-10 22:57:22 GMT', '2017-03-12 19:10:41 GMT', '2017-03-19 20:39:21 GMT', '2017-03-20 19:48:41 GMT', '2017-03-20 20:44:55 GMT', '2017-03-22 08:48:24 GMT', '2017-03-22 09:03:59 GMT', '2017-03-23 23:33:34 GMT', '2017-03-24 14:53:31 GMT', '2017-03-27 23:42:08 GMT', '2017-03-28 14:41:53 GMT', '2017-03-30 15:54:30 GMT', '2017-04-04 08:37:43 GMT', '2017-04-06 12:14:19 GMT', '2017-04-07 01:02:23 GMT', '2017-04-08 01:09:43 GMT', '2017-04-12 14:24:11 GMT', '2017-04-13 11:06:43 GMT', '2017-04-15 03:50:58 GMT', '2017-04-18 23:16:03 GMT', '2017-04-19 11:36:27 GMT', '2017-04-19 23:14:05 GMT', '2017-04-21 21:57:46 GMT', '2017-04-23 01:17:12 GMT', '2017-04-24 19:08:23 GMT', '2017-04-24 20:00:19 GMT', '2017-04-24 23:06:57 GMT', '2017-04-26 13:14:51 GMT', '2017-04-27 16:48:10 GMT', '2017-04-28 10:26:11 GMT', '2017-05-01 11:21:27 GMT', '2017-05-01 18:37:55 GMT', '2017-05-02 20:36:20 GMT', '2017-05-08 19:02:54 GMT', '2017-05-10 16:00:20 GMT', '2017-05-10 21:36:27 GMT', '2017-05-18 13:16:55 GMT', '2017-05-19 22:55:38 GMT', '2017-05-21 09:10:22 GMT', '2017-05-22 06:17:33 GMT', '2017-05-22 08:34:26 GMT', '2017-05-28 21:09:29 GMT', '2017-05-29 14:40:20 GMT', '2017-05-30 02:17:38 GMT', '2017-06-01 20:41:41 GMT', '2017-06-03 17:33:17 GMT', '2017-06-05 12:13:21 GMT', '2017-06-05 12:16:25 GMT', '2017-06-05 20:28:17 GMT', '2017-06-10 14:19:52 GMT', '2017-06-10 21:29:37 GMT', '2017-06-16 07:26:04 GMT', '2017-06-17 03:31:37 GMT', '2017-06-19 12:12:42 GMT', '2017-06-20 01:42:28 GMT', '2017-07-01 18:35:31 GMT', '2017-07-02 23:14:19 GMT', '2017-07-11 14:29:22 GMT', '2017-07-17 18:18:19 GMT', '2017-07-25 14:37:00 GMT', '2009-08-17 10:34:59 GMT')
a=c(a,'2010-03-02 07:41:10 GMT', '2010-07-02 14:43:22 GMT', '2011-04-16 13:27:25 GMT', '2011-05-25 11:57:45 GMT', '2011-08-17 14:37:46 GMT', '2011-09-20 14:42:01 GMT', '2011-10-17 21:34:30 GMT', '2011-11-01 11:08:02 GMT', '2011-11-16 18:34:25 GMT', '2011-12-05 00:20:26 GMT', '2012-01-06 05:35:32 GMT', '2012-02-18 13:30:37 GMT', '2012-02-20 18:50:31 GMT', '2012-03-23 17:33:06 GMT', '2012-03-25 15:54:29 GMT', '2012-03-31 11:00:12 GMT', '2012-04-10 18:44:51 GMT', '2012-04-24 08:42:29 GMT', '2012-05-22 16:50:37 GMT', '2012-06-11 13:49:18 GMT', '2012-06-22 16:12:52 GMT', '2012-06-24 15:27:29 GMT', '2012-06-27 12:24:34 GMT', '2012-06-27 19:04:32 GMT', '2012-07-07 22:21:41 GMT', '2012-08-01 02:41:03 GMT', '2012-09-07 20:17:26 GMT', '2012-09-10 08:24:35 GMT', '2012-11-09 14:55:58 GMT', '2012-11-21 01:11:07 GMT', '2012-12-09 15:35:54 GMT', '2012-12-13 22:42:07 GMT', '2012-12-27 00:56:58 GMT', '2013-01-04 09:38:37 GMT', '2013-01-04 18:32:00 GMT', '2013-01-16 21:34:06 GMT', '2013-01-19 12:01:41 GMT', '2013-02-02 18:58:36 GMT', '2013-02-24 19:06:48 GMT', '2013-03-04 07:23:09 GMT', '2013-03-16 19:38:59 GMT', '2013-03-19 20:44:49 GMT', '2013-03-22 05:14:40 GMT', '2013-03-22 09:16:23 GMT', '2013-03-22 23:47:17 GMT', '2013-03-27 19:50:03 GMT', '2013-05-01 21:09:21 GMT', '2013-05-08 12:54:53 GMT', '2013-05-10 09:51:37 GMT', '2013-05-12 11:47:03 GMT')
hist(as.POSIXct(a,format="%Y-%m-%d %H:%M:%S", tz = "GMT"), breaks=10)