Question

在我的应用程序中，在应用程序启动时，我正在显示提供的JSON文件中的字符。选择角色后，UI应该更新并显示角色出现的每部电影的详细信息。为此，我制作了MovieDetails组件，该组件进行API调用（JSON文件中提供了API URL以及这些调用返回的数据）。

当用户单击第一个li（Luke Skywalker）时，我试图获取电影详细信息，因为我在handleClick（）中使用了开关盒。但这不起作用。有人可以建议我在用户单击li时如何更新UI吗？

App.js

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

class App extends Component {
  state = {
    render: false
  }

  handleClick = (character) => {
    console.log(character.name);
    this.setState({ render: true })
  }
  render() {
    const list = <ul>
      {
        charactersFile.characters.map(character => {
          return <li key={character.name} onClick={() => this.handleClick(character)}>{character.name}</li>
        })
      }
    </ul>
    return (
      <React.Fragment>
        {this.state.render ? list : <MovieDetails />}
      </React.Fragment>
    )
  }
}

export default App

MovieDetails.js

import React, { Component } from 'react'
import axios from 'axios';

class MovieDetails extends Component {
  state = {
    movies: []
  }

  componentDidMount() {
    const PeopleUrl = `https://swapi.co/api/people/`;
    const FilmUrl = `https://swapi.co/api/films/`
      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 }
          ]
        })))
  }

  render() {
    console.log(this.state.title)
    return (
      <div className="App">
        <ul>
          {this.state.movies.map(movie => (
            <li key={movie.title}>
              {movie.title} - {movie.release_date}
            </li>
          ))}
        </ul>
      </div>
    )
  }
}

export default MovieDetails

characters.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

注意：React只在渲染函数内部渲染DOM元素。如果您在其他任何函数中返回组件（在您的情况下，您将在onClick函数中返回组件），则不应期望react会呈现新内容或组件。

现在，您的onClick会在用户互动时被调用。因此，您需要告诉React重新呈现页面，并根据当前状态呈现不同的内容或组件。如您所知，为了对re-render的页面做出反应，您需要set the state，因此在onClick中将状态设置为this.setState({ ... })。然后，在渲染函数中，您可以检查刚刚在onClick方法中设置的当前状态值，以显示<MovieDetails />还是其他内容。

示例：https://jsfiddle.net/pr0bwg3L/5/

在React中的li的onClick上加载组件

1 个答案: