Question

我正在尝试将数据传递到另一个组件，但是我无法重新渲染状态，所以当它通过组件时它不是一个空白数组。

电影卡组件：

import React, { Component } from 'react';
import getMovies from './MovieAPI.js';
import MoviePoster from './MoviePoster.js';

class MovieCardII extends Component {
  constructor() {
    super();
    this.state = {
      movies: [],
    };
  }

  componentDidMount() {
    getMovies().then(results => {
      this.setState(results.Search: movies)
      console.log("state", this.state);
      console.log(results.Search);
    });
  }
  render() {
    const { movies } = this.state;
    return (
      <div>
        <h1> Hi </h1>
        <MoviePoster movies={movies} />
      </div>
    );
  }
}

export default MovieCardII;

MoviePoster组件

import React from 'react';
import PropTypes from 'prop-types';

const MoviePoster = props => {
  const { movies } = props;
  console.log(movies);
  return (
    <div>
      {movies.map(movie => (
        <div>
          <h1> {movie.Poster} </h1>
        </div>
      ))}
    </div>
  );
};

MoviePoster.propTypes = {
  movies: PropTypes.array.isRequired,
};

export default MoviePoster;

我正在使用OMDB API，一旦我能够获得get请求，MovieCard组件就能够获得一个数组列表为10的状态。但是在MoviePoster组件中，电影数组仍然是一个空数组。

React的新功能，所以我很难理解如何将数据传递到另一个组件。如果我不必将数据传递到另一个数组，我能够创建我想要的视图，但我需要创建一个，因为我使用的API无法获取我需要的所有信息稍后在另一个组件中使用电影ID的API请求。所以基本上设置将是

movieCard是父母电影海报，movieInfo将是孩子们。

movieInfo将使用我从movieCard组件获得的imdbID来提取另一个API请求。

Answer 1

你设置状态的方式是错误的

电影卡组件：

componentDidMount(){
  getMovies().then(results=> {
    this.setState(results.Search: movies)
    console.log("state", this.state);
    console.log(results.Search);
  });
}

解决方案：电影卡片组件

componentDidMount(){
  getMovies().then(results=> {
    this.setState({movies: results.Search})
    console.log("state", this.state);
    console.log(results.Search);
  });
}

MoviePoster组件还需要进行一项更改您需要在循环时指定密钥

const MoviePoster = (props) => {
  const { movies } = props;
  console.log(movies);
  return (
    <div>
      {movies.map(movie => (
        <div key={movies.id}>
          <h1> {movie.Poster}</h1>
        </div>
      ))}
    </div>
  )
}

希望此解决方案能为您提供帮助。

将数据传递到另一个组件

1 个答案: