Javascript React componentDidMount未在electron应用程序中启动和更新状态

我正在创建一个electron react应用程序，我正在使用这个样板

我试图从API获取数据，我能够获取数据，但我无法使用setState更新状态。componentDidMount也没有开火。我是不是搞错了？这是我的密码

import React from "react"
import '../css/table.css'

const fs = window.require('fs');
const electron = window.require('electron')
const shell = electron.shell
const stockxAPI = window.require('stockx-api');
const stockX = new stockxAPI();

const scrapeStockx = (link, size) => {
    let lowestAsk 
    return stockX.fetchProductDetails(link)
        .then((response) => {
            let productData = response.variants
            //console.log(productData)
            for (let product of productData){
                if (product.size == size){
                    lowestAsk = product.market.lowestAsk
                    return '$' + lowestAsk
                }
            } 
    })
}
const fetchNewData = async (myProducts) => {
    for (let product of myProducts){
        let goatUrl = 'https://www.goat.com/web-api/v1/product_variants?productTemplateId='
        let goatSKU = product.Goat[0].split('sneakers/')[1]
        let ogUrl = goatUrl + goatSKU

        let price = await scrapeStockx(product.Stockx[0], product.Size)
        product.Stockx[1] = price
        console.log('Product Size: ' + product.Stockx[1])
    }
    return myProducts
}

class ProductTable extends React.Component{
    constructor(){
        super()
        this.state = {
            Products : ''
        }
        this.renderTableData = this.renderTableData.bind(this)
        this.updateProducts = this.updateProducts.bind(this)
    }

    async componentDidMount(){
        this.setState({Products : 'Loading...'});
        let myProducts = await this.updateProducts()
        console.log('Component ' + myProducts)
        this.setState({Products : myProducts})
        console.log('Component' + this.state)
    }


    async updateProducts () {
        let rawData = fs.readFileSync('/Users/yunioraguirre/Desktop/Lucky Cops Item Tracker V1/Lucky Item Tracker/MyProducts.json')
        let myProducts = JSON.parse(rawData)

        //Updates Goat and Stockx Prices
        myProducts = await fetchNewData(myProducts)
        try {
            await fs.writeFileSync('MyProducts.json', JSON.stringify(myProducts, null, 2))
            console.log('Success!')
            console.log(myProducts)
        } catch (error) {
            console.log(error)
        }
        return myProducts
    }

    renderTableData = () => {
        return this.state.Products.map( product => {
            const {Id, Item, sku, Size, Sold, Goat, Stockx} = product
            return (
                <tr key={Id}>
                    <td>{Id}</td>
                    <td>{Item}</td>
                    <td>{sku}</td>
                    <td>{Size}</td>
                    <td>{product["Total Amount Paid"]}</td>
                    <td>{Sold}</td>
                    <td>{product['Price Sold For']}</td>
                    <td> <a href={Goat[0]} target='_blank' rel="noopener noreferrer">{Goat[1]}</a></td>
                    <td> <a href={Stockx[0]} target='_blank' rel="noopener noreferrer">{Stockx[1]}</a></td>
                    <td> <a href={product['Flight Club'][0]} target="_blank" rel="noopener noreferrer">{product['Flight Club']}</a></td>
                </tr>
            )
        })
    }

    renderTableHeader = () => {
        console.log('State in Render' + JSON.stringify(this.state.Products))
        let header = Object.keys(this.state.Products[0])
        return header.map((key, index) => {
            return <th key={index}>{key.toUpperCase()}</th>
        })
    }
    render(){
        return (
            <div id='Table-Wrapper'>
                <h1 id='TableTitle'>Total Products</h1>
                <table id='Products Table'>
                    <tbody>
                        <tr>{this.renderTableHeader()}</tr>
                        {this.renderTableData()}
                    </tbody>
                </table>
            </div>
        )
    }


}

export default ProductTable

从“React”导入React
导入“../css/table.css”
常量fs=window.require（'fs'）；
常量electron=window.require（'electron'）
const shell=electron.shell
const stockxAPI=window.require（'stockx-api'）；
const stockX=new stockxAPI（）；
常数x=（链接，大小）=>{
让洛维斯塔斯克
return stockX.fetchProductDetails（链接）
。然后（（响应）=>{
让productData=response.variants
//console.log（productData）
for（让productData的产品）{
如果（product.size==大小）{
Lowstask=product.market.lowstask
返回“$”+Lowstask
}
} 
})
}
const fetchNewData=async（myProducts）=>{
for（我的产品中的let产品）{
让守门员https://www.goat.com/web-api/v1/product_variants?productTemplateId='
让goatSKU=product.Goat[0].split（'sneakers/'）[1]
让ogUrl=goatur+goatSKU
let price=Wait scrapeStockx（product.Stockx[0]，product.Size）
product.Stockx[1]=价格
console.log（'Product Size:'+Product.Stockx[1]）
}
退回我的产品
}
类ProductTable扩展了React.Component{
构造函数（）{
超级（）
此.state={
产品：“”
}
this.renderTableData=this.renderTableData.bind（this）
this.updateProducts=this.updateProducts.bind（this）
}
异步组件didmount（）{
this.setState（{Products:'Loading…'}）；
让myProducts=等待。updateProducts（）
console.log（'Component'+myProducts）
this.setState（{Products:myProducts}）
console.log（'Component'+this.state）
}
异步更新产品（）{
让rawData=fs.readFileSync（'/Users/yunioraguirre/Desktop/Lucky-Cops-Item-Tracker V1/Lucky-Item-Tracker/MyProducts.json'））
让myProducts=JSON.parse（rawData）
//更新山羊和斯托克斯的价格
myProducts=等待获取新数据（myProducts）
试一试{
等待fs.writeFileSync（'MyProducts.json'，json.stringify（MyProducts，null，2））
console.log（'Success！'）
console.log（myProducts）
}捕获（错误）{
console.log（错误）
}
退回我的产品
}
renderTableData=（）=>{
返回此.state.Products.map（product=>{
const{Id，Item，sku，大小，已售出，Goat，Stockx}=产品
返回(
{Id}
{Item}
{sku}
{Size}
{产品[“支付总额”]}
{出售}
{产品['售价']}
)
})
}
renderTableHeader=（）=>{
log（'Render中的状态'+JSON.stringify（this.State.Products））
let header=Object.keys（this.state.Products[0]）
返回header.map（（键，索引）=>{
返回{key.toUpperCase（）}
})
}
render（）{
返回(
总产品
{this.renderTableHeader（）}
{this.renderTableData（）}
)
}
}
导出默认ProductTable

这是我在控制台里得到的

---

问题是您提供了一个空字符串作为初始状态。第一个控制台日志来自

render

函数，第二个来自

this.renderTableHeader

。当您点击这一行时会出现问题：

let header=Object.keys（this.state.Products[0]）

---

Object.keys（“[0]）

我能够修复我的代码。正如Drew所说，我需要一个处于状态的isLoading变量，以便能够呈现和获取数据。这是我的更新状态和组件安装

class ProductTable extends React.Component{
    constructor(){
        super()
        this.state = {
            Products : '',
            isLoading : true
        }
        this.renderTableData = this.renderTableData.bind(this)
        this.updateProducts = this.updateProducts.bind(this)
    }

    async componentDidMount(){
        let myProducts = await this.updateProducts()
        console.log('Component ' + JSON.stringify(myProducts))
        console.log('\n')
        await this.setState({Products : myProducts, isLoading : false})
        //console.log(JSON.stringify(this.state))
    }
}

---

您好，我修复了我的代码，但我仍然收到相同的错误，ComponentDidMount没有触发，因为我看不到控制台中的console.log。我在ComponentDidMount中将我的isLoading更改为True，并将isLoading更改为False，它似乎触发了，但现在我收到一个新的错误

警告：无法对卸载的组件执行反应状态更新。这是一个no-op，但它表示应用程序中存在内存泄漏。要修复此问题，请取消componentWillUnmount方法中的所有订阅和异步任务。

@NinoSoles这实际上只是一个警告和一个单独的无关问题。当

ProductTable

卸载时，对

updateProducts

的一些调用似乎已经发出并且仍在运行中。如警告所示，异步更新组件状态的任何函数都需要能够在组件卸载时取消更新。您可以将中止控制器用于获取请求，并在

componentWillUnmount

中中止它。