拒绝(TypeError):无法读取未定义的属性“ setState”,未捕获(承诺)TypeError:无法读取未定义的属性“ setState”

时间:2019-11-14 19:56:09

标签: node.js reactjs promise setstate async.js

我有一个简单的代码,但是我(有时)收到错误的结果,这是由于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天,您有什么想法/建议吗?我找不到与async.auto类似的setState用法。

1 个答案:

答案 0 :(得分:0)

要解决setState问题,您需要意识到async.auto({})是一个承诺。

最终的错误功能需要删除以下代码:

<record id="picking_view_inherit_duvan1" model="ir.ui.view">
        <field name="name">my.picking.custom2</field>
        <field name="model">stock.move</field>
        <field name="inherit_id" ref="stock.view_move_picking_tree"/>
        <field name="arch" type="xml">
           <xpath expr="//field[@name='product_id']" position="attributes">
             <attribute name="options">{'no_create_edit':True,'no_create':True,'no_open':True}</attribute>
           </xpath>
        </field>
</record>

,并在async.auto({})的末尾添加:

function (err, results)
{
    this.setState({active:results.optionsFill})
    console.log('error: ', err)
}