Question

在我的应用程序中，我显示li中来自character.json文件的字符，当用户单击特定li时，我正在发出API请求并获取电影的详细信息并要显示，为此，我正在定义开关情况下，不同的li单击并从componentDidMount（）调用handleClick，但出现错误。谁能建议我如何解决该错误并正确显示数据？

App.js

import React, { Component } from 'react'
import charactersFile from "./data/characters.json"
import axios from 'axios';
import './App.css';

class App extends Component {

  state = {
    movies: [],
    loading: true,
    render: true
  }
  componentDidMount() {

  }

  handleClick = (character) => {
    console.log(character.name);
    const PeopleUrl = `https://swapi.co/api/people/`;
    const FilmUrl = `https://swapi.co/api/films/`;

    switch (character.name) {
      case "Luke Skywalker":
        axios.get(`${PeopleUrl}1/`)
          .then(response => Promise.all([
            axios.get(`${FilmUrl}2/`),
            axios.get(`${FilmUrl}6/`),
            axios.get(`${FilmUrl}3/`),
            axios.get(`${FilmUrl}1/`),
            axios.get(`${FilmUrl}7/`)
          ])).then(result => result.map(values =>
            this.setState({
              movies: [
                ...this.state.movies,
                { title: values.data.title, release_date: values.data.release_date }
              ],
              loading: false
            })))
        break;

      case "C-3PO":
        axios.get(`${PeopleUrl}2/`)
          .then(response => Promise.all([
            axios.get(`${FilmUrl}2/`),
            axios.get(`${FilmUrl}5/`),
            axios.get(`${FilmUrl}4/`),
            axios.get(`${FilmUrl}1/`),
            axios.get(`${FilmUrl}7/`)
          ])).then(result => result.map(values =>
            this.setState({
              movies: [
                ...this.state.movies,
                { title: values.data.title, release_date: values.data.release_date }
              ],
              loading: false
            })))
        break;

      case "Leia Organa":
        axios.get(`${PeopleUrl}unknown/`);
        break;

      case "R2-D2":
        axios.get(`${PeopleUrl}3/`)
          .then(response => Promise.all([
            axios.get(`${FilmUrl}2/`),
            axios.get(`${FilmUrl}5/`),
            axios.get(`${FilmUrl}4/`),
            axios.get(`${FilmUrl}6/`),
            axios.get(`${FilmUrl}3/`),
            axios.get(`${FilmUrl}1/`),
            axios.get(`${FilmUrl}7/`)
          ])).then(result => result.map(values =>
            this.setState({
              movies: [
                ...this.state.movies,
                { title: values.data.title, release_date: values.data.release_date }
              ],
              loading: false
            })))
        break;

      default: return 'No list item'
    }
  }

  render() {
    const content = this.state.loading ?
      <div style={{ marginTop: "20px", padding: "20px" }}>"Loading..."</div> :
      <ul>
        {this.state.movies.map(movie => (
          <li key={movie.title}>
            {movie.title} - {movie.release_date}
          </li>
        ))}
      </ul>

    const list = <ul>
      {
        charactersFile.characters.map(character => {
          return <li key={character.name} onClick={() => this.handleClick(character)}>{character.name}</li>
        })
      }
    </ul>

    return (
      <div className>
        {!this.state.render ? list : content}
      </div>
    )
  }
}

export default App;

character.json

{
  "characters": [
    {
      "name": "Luke Skywalker",
      "url": "https://swapi.co/api/people/1/"
    },
    {
      "name": "C-3PO",
      "url": "https://swapi.co/api/people/2/"
    },
    {
      "name": "Leia Organa",
      "url": "https://swapi.co/api/people/unknown/"
    },
    {
      "name": "R2-D2",
      "url": "https://swapi.co/api/people/3/"
    }
  ]
}

错误：

Answer 1

删除handleClick上的componentDidMount通话

  componentDidMount() {
    this.handleClick();  // calls handleClick(undefined)
  }

Answer 2

您要在handleClick中调用函数componentDidMount，并且不传递任何参数，这会使character函数定义中的handleClick未定义。

在其主体中，您正在访问其属性，因此，您会遇到上述错误。

只需从您的this.handleClick()中删除componentDidMount。或者，如果要调用它，则在函数中传递一些值。

我看到的另一个错误是您没有将div元素中的className属性传递（默认为true）

<div className>
  {!this.state.render ? list : content}
</div>

给它起个名字或删除它，

第二，您正在发出的API请求不存在，控制台中明显存在404错误。对于您的案例“ Leia Organa”，您正在发出${PeopleUrl}unknown/请求，而该请求根本不存在。

在React中的li的onClick上加载不同的详细信息

2 个答案: