Question

我在这里有反应组件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;

Answer 1

看起来只是语法错误。在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 }, } }

Answer 2

由于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)

Reatcjs访问数组和嵌套对象中的obejct属性

2 个答案: