我如何在我的 React 组件上导入和使用 promise 函数？

Question

所以这是我的 movies.js 组件，我想将数据电影传递到我想在卡片上显示数据的其他组件，但我不知道如何使用 promise 函数：

 const movies = [
  {
    id: '1',
    title: 'Oceans 8',
    category: 'Comedy',
    likes: 4,
    dislikes: 1
  }, {
    id: '2',
    title: 'Midnight Sun',
    category: 'Comedy',
    likes: 2,
    dislikes: 0
  },
]

export const movies$ = new Promise((resolve, reject) => setTimeout(resolve, 100, movies))

这是我想在卡片上显示的其他组件我尝试导入 const 电影 $，但没有成功：

import React, { Component } from "react";

import { Card, Button } from "react-bootstrap";

import { movies$ } from "../Data/movies";

export default class Movies extends Component {
  render() {
    return (
      <div>
          <h1>Movies</h1>
        <Card style={{ width: "18rem" }}>
          <Card.Img variant="top" src="holder.js/100px180" />
          <Card.Body>
            <Card.Title> 
              <movies$
                
              />
            </Card.Title>
            <Card.Text>
              Some quick example text to build on the card title and make up the
              bulk of the card's content.
            </Card.Text>
            <Button variant="primary">Supprimer</Button>
          </Card.Body>
        </Card>
      </div>
    );
  }
}

Answer 1

你不需要承诺。要显示数组中的数据，请使用 map() 函数

movies.js

const movies = [
  {
    id: "1",
    title: "Oceans 8",
    category: "Comedy",
    likes: 4,
    dislikes: 1
  },
  {
    id: "2",
    title: "Midnight Sun",
    category: "Comedy",
    likes: 2,
    dislikes: 0
  }
];

export default movies;

App.js

import React, { Component } from "react";
import { Card, Button } from "react-bootstrap";

import movies from "./movies";

export default class Movies extends Component {
  render() {
    return (
      <div>
        <h1>Movies</h1>

        {/* map function below */}
        {movies.map(movie => (
          <Card key={movie.id} style={{ width: "18rem" }}>
            <Card.Img variant="top" src="holder.js/100px180" />
            <Card.Body>
              <Card.Title>{movie.title}</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </Card.Text>
              <Button variant="primary">Supprimer</Button>
            </Card.Body>
          </Card>
        ))}

      </div>
    );
  }
}

演示：stackblitz

Answer 2

您需要在您的组件state中创建一个属性来存储电影，然后在Promise解析时填充它：

import { movies$ } from "../Data/movies";

export default class Movies extends Component {
    constructor() {
      this.state = {
       movies: []
      }
    }
    componentDidMount() {
       movies$
       .then(data => this.setState({movies: data}))
    }
   //...
}

迭代电影以呈现数据：

即：

<Card.Title> 
 {this.state.movies.map(movie => (<div>{movie.title}</div>))}
</Card.Title>

我如何在我的 React 组件上导入和使用 promise 函数？

how do i import and use promise function on my react component?

javascript

promise

reactjs

redux

card