componentDidMount 意外令牌错误 [React.js]

Question

我目前正在使用 PokeApi 创建 PokeDex。 我正在尝试完成 PokemonList，它将包含所有不同的 PokemonCard 按钮。

我收到expected ";" 我的componentDidMount错误，我不确定为什么。

该页面的代码是

import React from "react";
import PokemonCard from "./PokemonCard";
import "../ui/PokemonList.css";
import axios from 'axios';

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

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


const PokeList = () => {
  return (
    <section className="poke-list">
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
    </section>
  );
};

//export default PokeList;

它在componentDidMount()之后的{符号上标记错误。

即使我在大括号后添加了一个分号，错误仍然存在，即使我认为分号不是必需的，因为我遵循的指南没有这样做。

我违反了一些简单的规则吗？ 我是 React / JavaScript 的新手。

编辑 - - - - - - - - - - - - - - - - - - - - - - - - - ---

我的 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>
    );
  }
}

我现在收到以下错误

./src/components/layout/Dashboard.js
Attempted import error: '../pokemon/PokemonList' does not contain a default export (imported as 'PokeList').

Answer 1

可能是因为

import React from "react";
import PokemonCard from "./PokemonCard";
import "../ui/PokemonList.css";
import axios from 'axios';

export default class PokemonList extends Component {
state = {
  url: "https://pokeapi.co.api.v2.pokemon/",
  pokemon: null
};
} <----- extra curly brace remove this

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

//keep this function inside class
PokeList = () => {
  return (
    <section className="poke-list">
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
    </section>
  );
};

   render() {
   return(
   <div>{this.Pokelist}</div>
)
}}
//export default PokeList; // <=== remove this

您的组件确实安装在 class 组件之外。

使您当前的代码工作-

import React 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
  };


componentDidMount() {
  const res = axios.get(this.state.url);
  this.setState({pokemon: res.data['results'] });
}
} <==== class component ended

export const PokeList = () => {
  return (
    <section className="poke-list">
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
      <PokemonCard />
    </section>
  );
};

仪表板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>
    );
  }
}

Answer 2

第一个问题是无效的 url。

将 url 更改为： https://pokeapi.co/api/v2/pokemon/

见代码示例：

import React, { Component } from "react";
import ReactDOM from "react-dom";
import PokemonList from "./components/PokemonList";

import "./styles.css";

class App extends Component {
  render() {
    return (
      <div className="App">
        <PokemonList />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

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

class PokemonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      url: "https://pokeapi.co.api.v2.pokemon/",
      pokemons: []
    };
  }

  componentDidMount = () => {
    axios
      .get("https://pokeapi.co/api/v2/pokemon/")
      .then(response => {
        const data = response.data.results;
        this.setState({ pokemons: data });
      })
      .catch(error => {
        console.log(error);
      });
  };

  render() {
    const { pokemons } = this.state;
    return (
      <div className="pokemon-list">
        {pokemons.length > 0 &&
          pokemons.map(pokemon => {
            return <PokemonCard pokemon={pokemon} />;
          })}
      </div>
    );
  }
}

export default PokemonList;

import React, { Component } from "react";
class PokemonCard extends Component {
  render() {
    const { pokemon } = this.props;
    console.log(pokemon);
    return (
      <div className="pokemon-card">
        <p>Name: {pokemon.name}</p>
        <p>
          Url: <a href={pokemon.url}>{pokemon.url}</a>
        </p>
      </div>
    );
  }
}

export default PokemonCard;