如何使用 Promise (React) 从另一个文件导入 const 数据

Question

我正在尝试将数据从另一个文件导入到我的 React 组件中。通过解析数据的异步函数获取数据。

但是，在尝试映射使用组件中的测试数据时出现错误。我认为这与我的 getter returns 承诺有关。

如果我只是将数据作为 const 内联到同一个文件中，组件可以正常渲染。

JS文件（导出）

 export const test = () => {
        return new Promise((resolve, reject) => {
            resolve(data());
        });
     
    };
    
    const data = () => {
        return [
            {
                name: "tom",
                car: "tesla"
            },
            {
                name: "sam",
                car: "honda"
            },
            {
                name: "may",
                car: ["toyota", "BMW"],
            },
            
        ];
    };

Jsx文件（导入）

import { test } from "./test"

function List() {

  return (
    <div className="food">
      
      {test.map((value,index) => (
         <div key={index}>
           <p>{value.name}</p>
           <p>{value.car}</p>
           </div>    
         ))}
    </div>   
  ) 
}
export default List

Answer 1

Test 不是数组变量，它是 returns Promise 对象的函数。

要解决您的问题，请按照以下步骤操作：

声明状态 data 并将其值初始化为 [].
添加useEffect 挂钩以获取您的数据。

使用状态 data 渲染您的 html。

import React, { useState, useEffect } from 'react';
import { test } from './test';

function List() {
  const [data, setData] = useState([]);

  useEffect(() => {
    test().then((res) => setData(res));
  }, []);

  return (
    <div className="food">
      {data.map((value, index) => (
        <div key={index}>
          <p>{value.name}</p>
          <p>{value.car}</p>
        </div>
      ))}
    </div>
  );
}
export default List;

这是一个简单的演示：https://stackblitz.com/edit/react-2pmxgb?file=src%2FApp.js

Answer 2

Soufiane Boutahlil 答案是正确的，此外，如果您愿意，您还可以为 returns 承诺的函数创建一个自定义挂钩

function useAsync(promise, defaultValue) {
  const [data, setData] = useState(defaultValue);

  useEffect(() => {
    promise.then((promiseData) => setData(promiseData));
  }, [promise]);

  return data;
}

然后在你的代码中你可以这样做

function List() { {
  const testData = useAsync(test(), []); // empty array in the second parameter can be of type any
  return (
    <div>
      {testData.map((value, index) => (
        <div key={index}>
          <p>{value.name}</p>
          <p>{value.car}</p>
        </div>
      ))}
    </div>
  );
}

这是一个工作示例https://stackblitz.com/edit/react-1btahu

如何使用 Promise (React) 从另一个文件导入 const 数据

How can I import the const data from another file using Promise (React)

reactjs

es6-promise

react-map-gl