Question

这是我的课程，我在函数内声明了一个数组：

export default class FetchData {
    fetchD = () => {
        let Database=[];
        fetch('http://localhost:3000/someRoute')
            .then((response) => {
                let jsonStr = response.json();
                jsonStr.then((result) => {
                    //console.log(result);                  
                    for (let i in result) {
                        let Details = {
                            title: [], };
                        Details.title= result[i].title;  
                        Database.push(Details);                    
                    }     
                })
           }) 
    } 
}

现在我想将存储在数组Database中的数据导入到另一页并使用它。怎么做

Answer 1

您试图像这样在函数中获取数据然后将其导出以供另一个类使用的整个方法并不是真正的React方式，并且不会起作用，因为React不会知道何时更改数组。您应该使用类似https://reactjs.org/docs/hooks-effect.html的方法在要呈现的组件中获取要呈现的数据。如果要全局缓存多个组件的结果，则应查看Redux和Redux-Thunk之类的东西。

以下是我的第一个建议的示例，可以将其放置在渲染函数中：

const [db, setDb] = useState([]);

useEffect(() => {
    let Database = [];
    fetch('http://localhost:3000/someRoute')
        .then((response) => {
            let jsonStr = response.json();
            jsonStr.then((result) => {
                //console.log(result);                  
                for (let i in result) {
                    let Details = {
                        title: [],

                    };
                    Details.title = result[i].title;

                    Database.push(Details);
                }
            })
        })

    setDb(Database);
});

您还需要添加以下导入：

import React, { useState, useEffect } from 'react';

Answer 2

您可以将获取的内容包装在Promise中

fetchD = () => {
    let Database = [];
    return new Promise((resolve, reject) => {
              fetch('http://localhost:3000/someRoute')
        .then((response) => {
            let jsonStr = response.json();
            jsonStr.then((result) => {
                //console.log(result);                  
                for (let i in result) {
                    let Details = {
                        title: [],

                    };
                    Details.title = result[i].title;

                    Database.push(Details);
                    resolve(Database);
                }
            })
        });
    })
};

现在在您的组件中

import fetchD from './ the _place_you_exported';

/*
  other code
*/

    someMethod() {
       fetchD().then(data => {
           // do something with the data
           // here data will be the same value what you resolved in this case it will be the Database array
       })
    }

如何在React中将数组导出到其他类

2 个答案: