如何使用 state 從一個 class 到另一個

Question

所以我目前正在使用在線提供的 PokeApi 開發 PokeDex。

項目代碼如下：

import React, { Component } from "react";
import PokemonCard from "./PokemonCard";
import "../ui/PokemonList.css";
import axios from "axios";

export const PokemonList = class PokemonList extends Component {
  state = {
    url: "https://pokeapi.co/api/v2/pokemon/",
    pokemon: null
  };

  async componentDidMount() {
    const res = await axios.get(this.state.url);
    this.setState({ pokemon: res.data["results"] });

    console.log(res);
  }

  render() {
    return <div></div>;
  }
};
export const PokeList = () => {
  return (
    <React.Fragment>
      {this.state.pokemon ? (
        <section className="poke-list">
          {this.state.pokemon.map(pokemon => (
            <PokemonCard />
          ))}
        </section>
      ) : (
        <h1>Loading Pokemon</h1>
      )}
    </React.Fragment>
  );
};

如您所見，我在 PokemonList 組件 class 中聲明了 state，但隨后我嘗試在變量 PokeList 中進一步調用它。 問題是 state 在 PokeList 中沒有被識別

（我收到錯誤“TypeError：無法讀取未定義的屬性'狀態'”）

我如何 go 關於調用上面 class 中聲明的 state ？

- - - - - - - - - -編輯 - - - - - - - - - - - - - - - -

好的，所以我意識到了一些事情。 我有一個用於顯示我的列表的 Dashboard.js 代碼。 代碼如下

import React, { Component } from "react";

import { PokeList } from "../pokemon/PokemonList";

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col">
            <PokeList />
          </div>
        </div>
      </div>
    );
  }
}

當我將代碼從 PokeList 更改為 PokemonList 時。 所以會的

import React, { Component } from "react";

import { PokemonList } from "../pokemon/PokemonList";

export default class Dashboard extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col">
            <PokemonList />
          </div>
        </div>
      </div>
    );
  }
}

我想從 Api 中獲得 20 個口袋妖怪的列表

控制台日志（this.state.pokemon）；。

但由於我沒有在儀表板上顯示 PokeList，因此沒有顯示任何口袋妖怪卡。

控制台output截圖

Answer 1

首先，功能組件是無狀態的。 如果您需要維護 state 使用 class 組件或掛鈎。 您不能在另一個組件中使用一個組件的 state，您有兩種選擇，

1. 在這些組件之間創建父子關系
2. 使用 state 管理庫（Redux 等）

Answer 2

 import React, { Component } from "react"; import axios from "axios"; //make it as class based component export default class PokemonList extends Component { state = { url: "https://pokeapi.co/api/v2/pokemon/", pokemon: null }; async componentDidMount() { const res = await axios.get(this.state.url); this.setState({ pokemon: res.data["results"] }); console.log(res); } render() { //check your data here console.log(this.state.pokemon) {/*pass data to child*/} return <div> <PokeList data = { this.state } /> </div>; } }; //export this component export const PokeList = (props) => { //check your data is coming or not console.log(props.data) //access your data from props return ( <React.Fragment> {props.data.pokemon? ( <section className="poke-list"> {props.data.pokemon.map(pokemon => ( pokemon.name ))} </section> ): ( <h1>Loading Pokemon</h1> )} </React.Fragment> ); };

Answer 3

您需要迭代您的 pokelist，將 componentDidMount function 的結果作為道具傳遞給您的子組件，然后在子組件中接收您的道具，這是一個工作代碼和框，在 pokeList 子組件中迭代您的口袋妖怪名稱

Answer 4

您的 PokemonList 和 PokeList 組件之間存在一些混淆。 我相信你真正想要的只是擁有其中之一。 如果將兩者混合使用，您可以擁有一個基於 state 控制視圖的組件，在您的情況下，state 是您的口袋妖怪列表。

我在這里混合了這兩者，所以你的渲染方法呈現“加載口袋妖怪”，直到你從 axios 得到你的響應，然后當響應回來時，它會獲取該數據，更新你的 state 和 Z9ED39E2EA931586B6EZ8 觸發器更新觸發器一個 re69422577。

 import React, { Component } from "react"; import PokemonCard from "./PokemonCard"; import axios from "axios"; class PokemonList extends Component { state = { url: "https://pokeapi.co/api/v2/pokemon/", pokemon: null }; componentDidMount() { axios.get(this.state.url).then(res => { this.setState({ pokemon: res.data["results"] }); }); } render() { let pokemonList = <h1>Loading Pokemon</h1>; const pokemons = this.state.pokemon; if (pokemons) { pokemonList = ( <section className="poke-list"> <ul> {pokemons.map(pokemon => ( <PokemonCard pokemon={pokemon} /> ))} </ul> </section> ); } return <React.Fragment>{pokemonList}</React.Fragment>; } } export default PokemonList;

我還創建了一個簡單的 PokemonCard 組件，其中列出了 API 的結果，只是為了向您展示該方法有效。

 import React from "react"; const pokemonCard = props => { return ( <li key={props.pokemon.name}> <a href={props.pokemon.url}>{props.pokemon.name}</a> </li> ); }; export default pokemonCard;

您可以在此處找到最終代碼，PokeList 和 PokemonList 現在合並為一個名為 PokemonList 的組件：

請記住，如果您的渲染 function 依賴於某個 state，那么您可能肯定應該擁有該 state 在該組件中進行管理或從父組件傳遞下來。

在您的示例中，我注意到您在 state 中設置了 url。 URL 真的不會改變。 這是一個常數，因此您可以輕松地將其從 state 中刪除並將其放入變量中，然后將您的口袋妖怪列表留在那里。

例如：

 const url = "https://pokeapi.co/api/v2/pokemon/"; state = { pokemon: null }; componentDidMount() { axios.get(url).then(res => { this.setState({ pokemon: res.data["results"] }); }); }