React componentDidMount не запускается и не обновляет состояние в электронном приложении

Question

Я создаю приложение электронной реакции, и я использую этот шаблон https://github.com/willjw3/react-electron

Я пытаюсь получить данные из 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

Вот что я получаю в консоли

Answer 1

Проблема в том, что вы предоставляете пустую строку в качестве начального состояния. Первый консольный журнал из функции render, а второй из this.renderTableHeader. Проблема возникает, когда вы нажимаете эту строку: let header = Object.keys(this.state.Products[0])

Object.keys(""[0])

Вы можете попытаться создать отдельное состояние "isLoading" и условно отобразить JSX на этом.

this.state = {
  Products : '',
  isLoading: false,
}

...

async componentDidMount(){
  this.setState({isLoading: true});
  let myProducts = await this.updateProducts()
  console.log('Component ' + myProducts)
  this.setState({Products: myProducts, isLoading: false})
}

....

render(){
  if (this.state.isLoading) {
    return <div>Loading...</div>;
  }

  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>
  )
}

Answer 2

Мне удалось исправить мой код. Как заявил Дрю, мне нужна переменная isLoading в состоянии, чтобы я мог рендерить и извлекать свои данные. Вот мой обновленный State и ComponentDidMount

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))
    }
}