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

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

我收到我的

组件didmount

的

预期“

错误，我不确定原因

页面的代码是

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;

我现在得到以下错误

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

可能是因为

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

从“React”导入React；
从“/PokemonCard”导入PokemonCard；
导入“./ui/PokemonList.css”；
从“axios”导入axios；
导出默认类PokemonList扩展组件{
状态={
url:“https://pokeapi.co.api.v2.pokemon/",
口袋妖怪：空
};
}  {
返回(
);
};
render（）{
返回(
{this.Pokelist}
)
}}
//导出默认PokeList；// 第一个问题是无效的url

将url更改为：

请参见代码示例：

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}来自“React”；
从“react dom”导入react dom；
从“/components/PokemonList”导入PokemonList；
导入“/styles.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
ReactDOM.render(

);
}
}
导出默认PokemonCard；

您输入了错别字，您的
口袋妖怪列表在
状态之后将关闭
，只有在该状态结束时才会关闭。@ravibagul91您能澄清一下您的意思吗？即使我删除了分号，错误仍然存在。不是分号，在关闭类的状态之后有关闭
}
的状态。要在哪里使用
PokeList
组件？@ravibagul91我想在我的仪表板页面上使用PokeList，因为它显示在一个较小的分区中。如果我得到了你想要的，这应该可以工作。如果你想让口袋妖怪列表和口袋妖怪列表完全不同，那就不同了。告诉我你想要什么，然后我会相应地更改我的答案。删除“导出默认PokeList”会使我在const PokeList代码上出错。根据我的计算，我无法在同一块代码中导出两个默认值？无法从同一文件导出两个不同组件作为默认值。不，只能导出一次。因此，只有在顶部和底部选择一个
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>
  );
};

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

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;