我正在创建一个 Electron react 应用程序,我正在使用这个样板 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
最佳答案
问题是您提供了一个空字符串作为初始状态。第一个控制台日志来自 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>
)
}
关于javascript - React componentDidMount 未触发且未更新 Electron 应用程序中的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61355518/