node.js - 拒绝(TypeError):无法读取未定义的属性“setState”,未捕获(在承诺中)类型错误:无法读取未定义的属性“setState”
问题描述
我有一个简单的代码,但我(有时)收到错误的结果,这是因为 NodeJS 异步,我知道。最后我需要更新“this.setState({active: options})”。所以为了解决 NodeJS 的异步问题,我使用了 require("async") 库。但是现在我的简单代码变得相当复杂,结果也不是 100% 好。
而且,当我使用“this.setState({actove: options})”或“this.setState({actove: results.optionsFill})”时,在“功能之路”上,我收到错误:“未处理的拒绝( TypeError):无法读取未定义的属性 'setState'”和“未捕获(在承诺中)TypeError:无法读取未定义的属性 'setState'”。
请参阅简单的开始代码(代码计算输入到地图的图例,数字周期的 arr):
setLegend(data){
function roundingSize(number){
}
function rounding(number){
}
function stopsArrFill(jumpLegendValue, highestNumber){
}
// Searching for the highestNumber POPULATION
var highestNumber = 0
data.features.forEach(element => {
var value = element.properties["POPULATION"]
if(highestNumber<value) highestNumber = value
})
// Need to round the number, so it will look nice on the legend
highestNumber = roundingSize(highestNumber)
// Searching for the LowestNumber POPULATION
var LowestNumber = highestNumber
data.features.forEach(element => {
var value = element.properties["POPULATION"]
if(LowestNumber>value) LowestNumber = value
})
// Need to round the number, so it will look nice on the legend
LowestNumber = roundingSize(LowestNumber)
// 7 because 1 element is 0 and the last is the highestNumber, so it gives 7 empty elements to fill
var jumpLegendValue = Math.round(rounding((highestNumber - LowestNumber)/7))
var tmpStops = stopsArrFill(jumpLegendValue, highestNumber)
const options = {
name: 'Legenda',
description: 'Liczba wystąpień',
property: 'POPULATION',
stops: tmpStops
}
this.setState({active: options})
现在使用 async.auto 的复杂代码:
setLegend(data){
function roundingSize(number){
}
function rounding(number){
}
function stopsArrFill(jumpLegendValue, highestNumber){
}
async.auto({
highestNumber: function(callback){
// Searching for the highestNumber POPULATION
var highestNumber = 0
data.features.forEach(element => {
var value = element.properties["POPULATION"]
if(highestNumber<value) highestNumber = value
})
// Need to round the number, so it will look nice on the legend
highestNumber = roundingSize(highestNumber)
callback(null, highestNumber)
},
lowestNumber: ['highestNumber', function(results, callback){
// Searching for the LowestNumber POPULATION
var lowestNumber = results.highestNumber
data.features.forEach(element => {
var value = element.properties["POPULATION"]
if(lowestNumber>value) lowestNumber = value
})
// Need to round the number, so it will look nice on the legend
lowestNumber = roundingSize(lowestNumber)
callback(null, lowestNumber)
}],
jumpLegendValue: ['highestNumber', 'lowestNumber', function(results, callback){
// 7 because 1 element is 0 and the last is the highestNumber, so it gives 7 empty elements to fill
var jumpLegendValue = Math.round(rounding((results.highestNumber - results.lowestNumber)/7))
callback(null, jumpLegendValue)
}],
stopsArrFill:['highestNumber','jumpLegendValue', function(results, callback){
// Filling the stops with jumpLegendValues
var tmpStops = stopsArrFill(results.jumpLegendValue, results.highestNumber)
callback(null, tmpStops)
}],
optionsFill:['stopsArrFill', function(results, callback){
const options = {
name: 'Legenda',
description: 'Liczba wystąpień',
property: 'POPULATION',
stops: results.stopsArrFill
}
callback(null, options)
}],
function (err, results)
{
this.setState({active:results.optionsFill})
console.log('error: ', err)
}
})
我现在正在玩这个 2 天,你有什么想法/建议吗?我找不到 setState 与 async.auto 的任何类似用法。
解决方案
要解决 setState 问题,您需要注意 async.auto({}) 是一个承诺。
最后的错误函数需要删除这段代码:
function (err, results)
{
this.setState({active:results.optionsFill})
console.log('error: ', err)
}
并且在 async.auto({}) 的末尾需要添加:
.then((result)=>{
this.setState({active: result.optionsFill})
})
推荐阅读
- python - lxml 在 bs4 中未被识别:Mac 上的 Python 3
- asp.net - 验证 html5 两个提交按钮 .net
- android - 如何在 react-native 中缩小 WebView?
- javascript - 将图像设置为页面在 React 中呈现的第一张图像
- sas - 手动和由 SAS 完成时的卡方检验结果差异
- reactjs - 模拟 textarea Jest 测试的更改
- opengl - 将递归渲染的场景显示到平面中
- sql - 数据类型等效项:MS Access 表 ↔ 'CREATE TABLE' 查询 ↔ ODBC SQL
- java - 使用 switch 语句设置对象变量
- vb.net - 作为图形对象的球和曲线之间的碰撞