该函数似乎可以正常工作，它正在返回一个新对象，其中包含我需要的已编译数据。我看不到为什么当我尝试使用对象设置状态时，它返回未定义状态。
代码最好地说明了这一点...如果我需要编辑问题或更新p的任何内容[请告知我，让我们共同努力解决这个问题，以便我们可以找到答案。
以下是数据集 // 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）
:::: ===== UPDATE // UPDATE // UPDATE // UPDATE ===== :::
这是新代码：
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，我目前看不到原因。
答案 0 :(得分：0)
尚不清楚您想要返回什么，但是我对您的代码做了一些更改。您的代码中出现了一些空数组，因为位置名称并不总是匹配。例如，在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);
};