将数据传递到另一个组件答案

【问题标题】：Passing data into another component将数据传递到另一个组件
【发布时间】：2018-11-27 19:33:22
【问题描述】：

我正在尝试将数据传递到另一个组件，但我在重新渲染状态时遇到了问题，因此当它传递组件时它不是一个空白数组。

电影卡组件：

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，一旦我能够获取获取请求，MovieCard 组件就能够获取数组列表为 10 的状态。但是在 MoviePoster 组件中，电影数组仍然是一个空数组。

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

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

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

【问题讨论】：

this.setState(results.Search: movies) 这不是设置状态的正确方法，而是这样做 const movies = results.movies; this.setState({ 电影 })。应该有如下定义的键： {movies.map(movie => (

{movie.Poster}

))}
this.setState(results.Search: movies) 这在语法上甚至看起来都不正确。它编译了吗？
你是setState 错误的方式。阅读更多关于 React 中的 setState here

标签： reactjs components state

【解决方案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>
  )
}

希望此解决方案对您有所帮助。

【讨论】：