时间戳

首页 > 解决方案 > 如何在我的 react 组件上导入和使用 promise 函数？

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

问题描述

所以这是我的 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 movie$ 但它不起作用：

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>
    );
  }
}

标签： javascriptreactjsreduxpromisecard

解决方案

您需要在组件中创建一个属性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}))
    }
   //...
}

遍历电影以渲染数据：

IE：

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

推荐阅读