Question

我有一个组件，需要根据URL（参数）中传递的ID显示电影的详细信息。我在执行RENDER方法的条件时遇到困难。这可能很简单，但是我对React流仍然不是很熟悉。你能给我个主意吗？

import React, { Component } from "react";
import api from "../../services/api";

export default class Movie extends Component {
  state = {
    movies: [],
    movieId: {}
  };

  async componentDidMount() {
    const { id } = this.props.match.params;

    const response = await api.get("");
    const currentParams = this.props.match.params;

    this.setState({
      movies: response.data,
      movieId: `${id}`
    });
    console.log(this.state.movies);
    console.log(this.state.movieId);
  }

  render() {
    const movies = this.state.movies,
      currentParams = this.state.movieId;

    return (
      <div className="movie-info">
        {this.state.movies.map(movie => (
          if( movie.event.id === currentParams ) {
            <h1 key={movie.event.id}>{movie.event.title}</h1>
          }
        ))}
      </div>
    );
  }
}

Answer 1

在这种情况下，您可能不想使用map，因为您只想渲染一部电影。相反，您可以使用find方法并渲染单个电影（如果找到）。

class Movie extends Component {
  // ...

  render() {
    const { movies, movieId } = this.state;
    const movie = movies.find(movie => movie.event.id === movieId);

    return (
      <div className="movie-info">
        {movie ? <h1 key={movie.event.id}>{movie.event.title}</h1> : null}
      </div>
    );
  }
}

在React.js的内容显示组件中的渲染中有条件

1 个答案: