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的新手。

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

我的仪表板.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

您安装的组件在类组件之外。

使当前代码正常工作-

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

第一个问题是无效的网址。

使用以下网址更改网址：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;