javascript - 在常规 javascript 文件中使用 NPM 模块

Question

我正在尝试在常规 javascript 文件中使用 NPM 模块 React-Geocode，而不是 React 组件文件。谁能告诉我为什么这行不通？

长话短说 - 我已经重新编写了我之前使用 wordpress 中的插件制作的网站......用户所做的其中一件事是将他们的城市输入到他们的个人资料中，以便可以按位置搜索它们。我在我的 react 网站中使用了 React-Geocode 来实现这一点。它将他们输入的城市变成坐标。

我完成了编码并想将我的旧用户导入新网站......所以我编写了下面的文件以从旧网站获取我的用户列表并将它们放在新网站上。问题是.. 坐标不会从 wordpress 导出。

任何想法为什么这不起作用？它说“Geocode.setApiKey(....) 不是一个函数。”

    const uuidv4 = require('uuid')
const BulkBands = require('./BulkBands')
const fetch = require("node-fetch");
const Geocode = require('react-geocode')

let bandCount = 0

Geocode.setApiKey("xxxxxxxxxxxxxx");

const addTheBand = async (newBand, band) => {

    let newLocation = []

    Geocode.fromAddress(band.bandLocation).then(
        response => {
        const { lat, lng } = response.results[0].geometry.location;
        console.log(lat, lng);
        newLocation = [ lng, lat ]
        },
        error => {
        console.error(error);
        }
    );

    try {
            const response = await fetch('http://localhost:5000/api/autoquotegenerators', {
            method: 'POST',
            headers: {
                "Content-Type": 'application/json; charset=UTF-8'
            },
            body: JSON.stringify(newBand)
            })
            const responseData = await response.json()
            if(responseData){
                console.log('Band Added');
                setTimeout(() => {
                    updateBandLocation({
                        geometry: {
                            coordinates: newLocation,
                            city: band.bandLocation,
                        }
                    }, responseData._id, responseData, band)
                }, 500)
            }

    } catch (error) {
        console.log(error)
    }

}

const updateBandLocation = async (newLocation, bandUserId, band, oldBand) => {
    console.log('adding location...')

    let newPosts = [...band.posts]

    if(oldBand.youtube1){
        newPosts.push({
            type: "video", 
            data: oldBand.youtube1, 
            date: new Date(), 
            postId: uuidv4(), 
            rockOn: []
        })
    }

    if(oldBand.youtube2){
        newPosts.push({
            type: "video", 
            data: oldBand.youtube2, 
            date: new Date(), 
            postId: uuidv4(), 
            rockOn: []
        })
    }

try {
    const response = await fetch(`http://localhost:5000/api/autoquotegenerators/${bandUserId}`, {
        method: 'PUT',
        headers: {
            "Content-Type": "application/json; charset=UTF-8",
        },
        body: JSON.stringify({
            bandLocation: newLocation,
            posts: newPosts
        })
    })
    const responseData = await response.json()

    bandCount += 1

    console.log(bandCount)

} catch (error) {
    console.log(error)
}
}


BulkBands.forEach(band => {

    addTheBand({
        quoteGenerator: [],
        userId: band.userId,
        posts: [
            {
                "type": "band",
                "data": "",
                "date": new Date(),
                "postId": uuidv4(),
                "approved": null,
                "rockOn": []
            },
        ],
        type: 'band',
        bandName: band.bandName,
        bandEmail: band.bandEmail,
        bandGenre: band.bandGenre,
        bandBio: band.bandBio,
        youtube: [band.youtube1, band.youtube2],
        published: false,
        cancellationPolicy: 'You may cancel this performance up to 2 weeks prior to the performance date without penalty. If this performance is cancelled within 2 weeks of the performance date the booking party will be required to pay 50% of the booking fee to the band. If the booking is cancelled within 3 days of the performance date the full payment is required to be paid to the band. ',
        baseCost: band.baseCost,
        mainDate: {
        charge: band.timedRate,
        sunday: 0,
        monday: 0,
        tuesday: 0,
        wednesday: 0,
        thursday: 0,
        friday: 0,
        saturday: 0,
    }
    }, band) 
})

标签： javascriptnpm