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

Posted 2023-03-28

【中文标题】如何在我的 react 组件上导入和使用 promise 函数？

【英文标题】：how do i import and use promise function on my react component?

【发布时间】：2021-06-21 03:57:14

【问题描述】：

所以这是我的 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 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>
    );
  
 

【问题讨论】：

为什么需要在 Promise 中暴露 movies 数据？为什么不直接导出movies 数组，然后在你的组件中导入呢？

我是第一次使用redux，我认为我需要使用promise

@ThulaksanJayapal 如果您使用的是 redux，请查看 lissettdm 的回答，也许这就是您所需要的

【参考方案1】：

您需要在组件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>

【参考方案2】：

你不需要承诺。要显示数组中的数据，请使用 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