Question

我正在开发一个基本的反应应用程序，我使用Pokeapi来获取一些数据。该数据将存储在州内。

我的目的是将每一代渲染为bootstrap col-md-x，我应该为每一代使用单个函数还是一次渲染所有代的函数？

组件片段：

import React, { Component } from 'react';
import Pokemon from './Pokemon';
import Loader from './Loader';
import * as PokeService from '../services/PokeService'

export default class PokeOverview extends Component {
    constructor(props) {
        super(props);
        this.state = {
            generations: {
                firstGen: [],
                secondGen: [],
                thirdGen: [],
                fourthGen: [],
                fifthGen: [],
                sixthGen: [],
                seventhGen: [],
            }
        };
        this.isLoading = true;
    }
    componentDidMount() {
        this.isLoading = false;
        PokeService.getFirstGen().then((response) => {
            this.setState({
                generations: {
                    ...this.state.generations,
                    firstGen: response.results
                }
            });
        }).catch(error => console.log(error.message))

        PokeService.getSecondGen().then((response) => {
            this.setState({
                generations: {
                    ...this.state.generations,
                    secondGen: response.results
                }
            });
        }).catch(error => console.log(error.message))
        console.log(this.state.generations);
    }
    renderFirstGen() {
        console.log(this.state.generations);
        return this.state.generations.firstGen.map((gen, i) => {
            return <Pokemon key={i} name={gen.name} />
        });
    }
    renderAllGens() {
        Object.keys(this.state.generations).map((generation) => {
            return this.state.generations[generation].map((pokemon, i ) => (
                <Pokemon key={i} name={pokemon.name} />
            ))
        });
    }
    render() {
        return(
            <section>
                <h3>Pokemon list:</h3>
                <ol className="pokemon-list">
                    {!this.isLoading ? this.renderAllGens() : (<Loader/>)}
                </ol>
            </section>
        )
    }
}

服务片段：

export const getFirstGen = () => {
    return fetch("https://pokeapi.co/api/v2/pokemon/?limit=151&offset=0", {
        cache: "force-cache"
    }).then((response) => {
        return response.json();
    })
};
export const getSecondGen = () => {
    return fetch("https://pokeapi.co/api/v2/pokemon/?limit=100&offset=152", {
        cache: "force-cache"
    }).then((response) => {
        return response.json();
    })
};
export const getThirdGen = () => {
    return fetch("https://pokeapi.co/api/v2/pokemon/?limit=135&offset=252", {
        cache: "force-cache"
    }).then((response) => {
        return response.json();
    })
};
export const getFourthGen = () => {
    return fetch("https://pokeapi.co/api/v2/pokemon/?limit=107&offset=387", {
        cache: "force-cache"
    }).then((response) => {
        return response.json();
    })
};
export const getFifthGen = () => {
    return fetch("https://pokeapi.co/api/v2/pokemon/?limit=156&offset=494", {
        cache: "force-cache"
    }).then((response) => {
        return response.json();
    })
};
export const getSixthGen = () => {
    return fetch("https://pokeapi.co/api/v2/pokemon/?limit=72&offset=650", {
        cache: "force-cache"
    }).then((response) => {
        return response.json();
    })
};
export const getSeventhGen = () => {
    return fetch("https://pokeapi.co/api/v2/pokemon/?limit=300&offset=722", {
        cache: "force-cache"
    }).then((response) => {
        return response.json();
    })
};

Printscreen of result

Answer 1

this.state.pokemon是一个不可映射的对象。您可以使用函数Object.keys()，它将对象中的所有键检索为数组并映射到它。

return Object.keys(this.state.generations).map((generation) => {
     return this.state.generations[generation].map((gen, i ) => (
        <Pokemon key={i} name={gen.name} />
     ))
 });

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      generations: {
        firstGen: ['one', 'two'],
        secondGen: ['three', 'four']
      }
    }
  }
  render() {
    return (
      <div>
        {
          Object.keys(this.state.generations).map(gen=>{
            return this.state.generations[gen].map(name=>(
              <p>{name}</p>
            ));
          })
        }
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

此外，this.setState只需要更新的状态变量，您不需要传播整个状态。 https://reactjs.org/docs/state-and-lifecycle.html#state-updates-are-merged

this.setState((prevState)=>{
  generations: {
    ...prevState.generations,
    firstGen: response
  }
});

反应如何嵌套.map函数

1 个答案: