为什么我不能用返回的值设置状态，是否超出范围？答案

【问题标题】：Why can I not setState with the value returned, is it out of scope?为什么我不能用返回的值设置状态，是否超出范围？
【发布时间】：2019-09-09 16:16:52
【问题描述】：

该函数似乎可以工作，它正在返回一个新对象，其中包含我需要的编译数据。我不明白为什么当我尝试使用对象设置状态时，它返回未定义。

代码最好地解释了这一点...如果我需要编辑问题或更新任何内容请通知我并让我们一起解决这个问题，以便我们得到答案。

这里是数据集 // locationPriceYear.json


{
    "YLP": [
        [
            {
                "year": "Jan-95",
                "location": "City of London",
                "price": "91449"
            },
            {
                "year": "Jan-95",
                "location": "Barking & Dagenham",
                "price": "50460"
            },
            {
                "year": "Jan-95",
                "location": "Barnet",
                "price": "93285"
            },
            {
                "year": "Jan-95",
                "location": "Bexley",
                "price": "64958"
            },
            {
                "year": "Jan-95",
                "location": "Brent",
                "price": "71307"
            },
            {
                "year": "Jan-95",
                "location": "Bromley",
                "price": "81671"
            },
            {
                "year": "Jan-95",
                "location": "Camden",
                "price": "120933"
            },
            {
                "year": "Jan-95",
                "location": "Croydon",
                "price": "69158"
            },
            {
                "year": "Jan-95",
                "location": "Ealing",
                "price": "79886"
            },
            {
                "year": "Jan-95",
                "location": "Enfield",
                "price": "72515"
            },
            {
                "year": "Jan-95",
                "location": "Greenwich",
                "price": "62300"
            },
            {
                "year": "Jan-95",
                "location": "Hackney",
                "price": "61297"
            },
            {
                "year": "Jan-95",
                "location": "Hammersmith & Fulham",
                "price": "124903"
            },
            {
                "year": "Jan-95",
                "location": "Haringey",
                "price": "76288"
            },
            {
                "year": "Jan-95",
                "location": "Harrow",
                "price": "84770"
            },
            {
                "year": "Jan-95",
                "location": "Havering",
                "price": "68000"
            },
            {
                "year": "Jan-95",
                "location": "Hillingdon",
                "price": "73835"
            },
            {
                "year": "Jan-95",
                "location": "Hounslow",
                "price": "72232"
            },
            {
                "year": "Jan-95",
                "location": "Islington",
                "price": "92516"
            },
            {
                "year": "Jan-95",
                "location": "Kensington & Chelsea",
                "price": "182695"
            },
            {
                "year": "Jan-95",
                "location": "Kingston upon Thames",
                "price": "80876"
            },
            {
                "year": "Jan-95",
                "location": "Lambeth",
                "price": "67771"
            },
            {
                "year": "Jan-95",
                "location": "Lewisham",
                "price": "60491"
            },
            {
                "year": "Jan-95",
                "location": "Merton",
                "price": "82071"
            },
            {
                "year": "Jan-95",
                "location": "Newham",
                "price": "53539"
            },
            {
                "year": "Jan-95",
                "location": "Redbridge",
                "price": "72190"
            },
            {
                "year": "Jan-95",
                "location": "Richmond upon Thames",
                "price": "109326"
            },
            {
                "year": "Jan-95",
                "location": "Southwark",
                "price": "67885"
            },
            {
                "year": "Jan-95",
                "location": "Sutton",
                "price": "71537"
            },
            {
                "year": "Jan-95",
                "location": "Tower Hamlets",
                "price": "59865"
            },
            {
                "year": "Jan-95",
                "location": "Waltham Forest",
                "price": "61319"
            },
            {
                "year": "Jan-95",
                "location": "Wandsworth",
                "price": "88559"
            },
            {
                "year": "Jan-95",
                "location": "Westminster",
                "price": "133025,"
            }
        ],
        [
            {
                "year": "Jan-96",
                "location": "City of London",
                "price": "108999"
            },
            {
                "year": "Jan-96",
                "location": "Barking & Dagenham",
                "price": "50828"
            },
            {
                "year": "Jan-96",
                "location": "Barnet",
                "price": "91111"
            },
            {
                "year": "Jan-96",
                "location": "Bexley",
                "price": "63996"
            },
            {
                "year": "Jan-96",
                "location": "Brent",
                "price": "72806"
            },
            {
                "year": "Jan-96",
                "location": "Bromley",
                "price": "82210"
            },
            {
                "year": "Jan-96",
                "location": "Camden",
                "price": "119560"
            },
            {
                "year": "Jan-96",
                "location": "Croydon",
                "price": "68006"
            },
            {
                "year": "Jan-96",
                "location": "Ealing",
                "price": "80214"
            },
            {
                "year": "Jan-96",
                "location": "Enfield",
                "price": "71544"
            },
            {
                "year": "Jan-96",
                "location": "Greenwich",
                "price": "62417"
            },
            {
                "year": "Jan-96",
                "location": "Hackney",
                "price": "66327"
            },
            {
                "year": "Jan-96",
                "location": "Hammersmith & Fulham",
                "price": "126914"
            },
            {
                "year": "Jan-96",
                "location": "Haringey",
                "price": "81677"
            },
            {
                "year": "Jan-96",
                "location": "Harrow",
                "price": "83216"
            },
            {
                "year": "Jan-96",
                "location": "Havering",
                "price": "67347"
            },
            {
                "year": "Jan-96",
                "location": "Hillingdon",
                "price": "72869"
            },
            {
                "year": "Jan-96",
                "location": "Hounslow",
                "price": "73377"
            },
            {
                "year": "Jan-96",
                "location": "Islington",
                "price": "89406"
            },
            {
                "year": "Jan-96",
                "location": "Kensington & Chelsea",
                "price": "198312"
            },
            {
                "year": "Jan-96",
                "location": "Kingston upon Thames",
                "price": "82561"
            },
            {
                "year": "Jan-96",
                "location": "Lambeth",
                "price": "68780"
            },
            {
                "year": "Jan-96",
                "location": "Lewisham",
                "price": "57838"
            },
            {
                "year": "Jan-96",
                "location": "Merton",
                "price": "81277"
            },
            {
                "year": "Jan-96",
                "location": "Newham",
                "price": "54376"
            },
            {
                "year": "Jan-96",
                "location": "Redbridge",
                "price": "72861"
            },
            {
                "year": "Jan-96",
                "location": "Richmond upon Thames",
                "price": "111174"
            },
            {
                "year": "Jan-96",
                "location": "Southwark",
                "price": "65753"
            },
            {
                "year": "Jan-96",
                "location": "Sutton",
                "price": "70031"
            },
            {
                "year": "Jan-96",
                "location": "Tower Hamlets",
                "price": "67552"
            },
            {
                "year": "Jan-96",
                "location": "Waltham Forest",
                "price": "62060"
            },
            {
                "year": "Jan-96",
                "location": "Wandsworth",
                "price": "89092"
            },
            {
                "year": "Jan-96",
                "location": "Westminster",
                "price": "133843"
            },
        ]
    ]
}

等等……等等……

然后是邮政编码。

\locationAndPostcode.json

{
    "City of London": "EC1A 7BE",
    "Barking & Dagenham and Havering": "RM9 4TP",
    "Barnet": "EN5 5RP",
    "Bexley and Greenwich": "DA16 3DN",
    "Brent": "HA9 9AA",
    "Bromley": "BR1 3NN",
    "Camden": "NW1 8QL",
    "Croydon": "CR2 7PA",
    "Ealing": "W13 0JX",
    "East Surrey": "GU8 5AD",
    "Enfield": "EN2 7AA",
    "Greenwich": "SE9 1DU",
    "Hackney and Newham": "E8 1FD",
    "Hammersmith & Fulham": "W6 8AB",
    "Haringey and Islington": "N8 9DJ",
    "Harrow": "HA3 5AG",
    "Havering": "RM12 6PL",
    "Hillingdon": "UB8 1JZ",
    "Hounslow": "TW3 2DL",
    "Islington": "N5 1RA",
    "Kensington & Chelsea": "W8 5SA",
    "Kingston upon Thames": "KT5 9NX",
    "Lambeth": "SW9 8HE",
    "Lewisham & Southwark": "SE6 4RE",
    "Merton": "SW20 9JT",
    "Newham": "E13 9AP",
    "Redbridge": "IG6 1NA",
    "Richmond upon Thames": "TW9 1EZ",
    "Southwark": "SE1 5AA",
    "Sutton": "SM1 1JA",
    "Tower Hamlets": "E14 7JE",
    "Waltham Forest": "E17 7LP",
    "Wandsworth": "SW12 8PB",
    "Westminster": "SW1H 0BB",
    "West Essex:": "IG11 8TU"
}


import React, { Component } from "react";

class PostcodeConverter extends Component {
    componentDidMount() {
        this.sortData(this.setDataObj);
    }

    sortData = callback => {
        const mapped = locationPriceYear.YLP.map(i => Object.values(i));
        const result = mapped.map(i => {
            return i.map(j => {
                const location = j.location;
                const postcodeMatcher = Object.entries(locationAndPostcode).map(i => {
                    const local = i[0];
                    const post = i[1];
                    return [local, post];
                });
                postcodeMatcher.filter(element => {
                    if (element[0] === location) {
                        const obj = Object.assign({
                            location,
                            postcode: element[1],
                            price: j.price
                        });
                        console.log('obj', obj)
                        return obj;
                    }
                });

            });
        });
        console.log('result', result)
        callback(result);

    };

    setDataObj = obj => {
        this.setState({obj})
    }

    render() {
        console.log("this.state", this.state);

        return <div></div>;
    }
}

export default PostcodeConverter;

我希望这样：

obj {location: "City of London", postcode: "EC1A 7BE", price: "91449"}

etc.. etc...

但我看到了这个：

(25) [Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33), Array(33)]
0: (33) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
1: (33) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
2: (33) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
3: (33) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
4: (33) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
5: (33) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]
6: (33) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

等...等...（重复长度：25）

::::=====更新//更新//更新//更新=====:::

这是新代码：


import React, { Component } from "react";
import locationAndPostcode from "../../dummyData/locationAndPostcode.json";
import locationPriceYear from "../../dummyData/locationPriceYear.json";

class PostcodeConverter extends Component {
    componentDidMount() {
        this.sortData(this.setDataObj);
    }

    sortData = callback => {
        const mapped = locationPriceYear.YLP.map(i => Object.values(i));
        const result = mapped.map(i => {
            console.log(i);
            const mapLocalAndPost = i.map(j => {
                const location = j.location;

                const postcodeMatcher = Object.entries(locationAndPostcode).map(i => {
                    const local = i[0];
                    const post = i[1];
                    return [local, post, "steve"];
                });

        // for some reasn the above array is beying returned opposed to he 'obj' from down below. 
        // I don't see why or understand why this is happening. Need to test further why this is being returned here


                const matchAndCreateNewObj = postcodeMatcher.filter(element => {
                    if (element[0] === location) {
                        const obj = Object.assign({
                            location,
                            postcode: element[1],
                            price: j.price
                        });
                        console.log("obj", obj);
                        return obj;
                    }
                });
                console.log('matchAndCreateNewObj', matchAndCreateNewObj)
                return matchAndCreateNewObj

            });
            console.log('mapLocalAndPost', mapLocalAndPost)
            return mapLocalAndPost;
        });
        callback(result);
    };

    setDataObj = obj => {
        this.setState({ obj });
    };

    render() {
        console.log("this.state", this.state);
        return <div>{this.state && JSON.stringify(this.state)}</div>;
    }
}

export default PostcodeConverter;

它现在返回 postcodeMatcher 而不是 obj，我目前不明白为什么。

【问题讨论】：

您没有向map 函数返回任何内容。如果要返回postcodeMatcher 的结果，请添加return postcodeMatcher.filter()。
@randomSoul 我已经调整了代码并试图解决这个问题。我现在隔离了一个新问题，我不确定该怎么做。请检查更新。

标签： javascript reactjs ecmascript-6

【解决方案1】：

尚不完全清楚您想要返回什么，但我对您的代码进行了一些更改。您在我的代码中得到一些空数组，因为位置名称并不总是匹配。例如，在 locationPriceYear 中，您有“Hackney”，在 locationAndPostcode 文件中称为“Hackney and Newham”。这些“错误”还有很多。

它现在返回一个长度为 2 的数组。这两个数组由如下所示的对象组成 { location: 'Wandsworth', postcode: 'SW12 8PB', price: '89092' }

如果您愿意，您可以选择以不同方式映射此数组。

sortData = callback => {
    const mapped = locationPriceYear.YLP.map(i => Object.values(i));
    const result = mapped.map(i => {
        return i.map(j => {
            const location = j.location;
            return Object.entries(locationAndPostcode).map(i => {
                const local = i[0];
                const post = i[1];
                return [local, post];
            })
            .filter(element => element[0] === location)
            .map(element => {
                return {
                    location,
                    postcode: element[1],
                    price: j.price
                };
            })  
        });
    })

    console.log('result', result[0], result[1])
    callback(result);

};

【讨论】：

感谢您的回复。现在实施。至于“错误”。这是从不良来源获取的数据，我已尽力将其浓缩为我正在使用的内容，将 40,000 多行 JSOn 减少到大约 1000 行。只要它最终让我得到一些有用的东西（不必须是完美的）我很高兴。
为了清楚起见，我想根据“位置”对象属性组合两组数据。这样一来，他们就有了一个位置的价格、位置和邮政编码。它是要在地图上渲染的数据，并且是不完整的，但最好是充满漏洞的原始 CSV。再次感谢您，我不太擅长组织问题，尤其是当我遇到困难时，因此感谢您的帮助。