所以我具有以下反应功能组件:
import React from "react";
import LNSelect from "../LNSelect/LNSelect";
import { CountryRegionData } from "react-country-region-selector";
const parsed = CountryRegionData.map(
([country_name, country_code, cities]) => ({
country_name,
country_code,
cities: cities
.split("|")
.map(cityData => cityData.split("~"))
.map(([city_name, city_code]) => ({ city_name, city_code }))
})
);
const regions = parsed
.find(country => country.country_name === this.props.country)
.cities.map(({ city_name, city_code }) => ({
label: city_name,
value: city_code
}));
const LNSelectRegion = props => {
return <LNSelect options={regions} {...props} />;
};
export default LNSelectRegion;
[基本上,我使用软件包获取国家及其城市/城市代码,然后找到作为道具country
传递的特定国家,并将其城市映射到label
和value
数组中,以供选择器组件I使用有,此代码的问题是在.find
行上,我收到错误Cannot read property 'props' of undefined
,我想解决此问题,并且还想为country prop设置默认值,以防空白(if this.props.country === "" {this.props.country = "United States}
),我该怎么办?
您不能在功能组件中使用this
,因此您的代码应为:
const regions = parsed
.find(country => country.country_name === props.country)
.cities.map(({ city_name, city_code }) => ({
label: city_name,
value: city_code
}));
此外,您还需要带有传递的props参数围绕此块的函数
const YourComponent = (props) => {
// your code above
}
1)在功能组件中,您可以使用[props
而不是this.props
。
2)您只能在功能组件LNSelectRegion
中获得道具。
所以我只是在此处按照该标准重新编写您的代码,希望它可以正常工作
import React from "react";
import LNSelect from "../LNSelect/LNSelect";
import { CountryRegionData } from "react-country-region-selector";
const parsed = CountryRegionData.map(
([country_name, country_code, cities]) => ({
country_name,
country_code,
cities: cities
.split("|")
.map(cityData => cityData.split("~"))
.map(([city_name, city_code]) => ({ city_name, city_code }))
})
);
const LNSelectRegion = props => {
const regions = parsed
.find(country => country.country_name === props.country)
.cities.map(({ city_name, city_code }) => ({
label: city_name,
value: city_code
}));
return <LNSelect options={regions} {...props} />;
};
export default LNSelectRegion;
const regions
函数应该写在传递道具的功能组件内部。
// Functional component
const Child = props => {
const regions = parsed
.find(country => country.country_name === props.country)
.cities.map(({ city_name, city_code }) => ({
label: city_name,
value: city_code
}));
return (
<div></div>
)
}
原因this
中的this.props.country
未定义。尝试传递道具以获得regions
const getRegions = (country) => parsed
.find(country => country.country_name === country)
.cities.map(({ city_name, city_code }) => ({
label: city_name,
value: city_code
}));
const LNSelectRegion = props => {
return <LNSelect options={getRegions(props.country)} {...props} />;
};
您的parsed
和regions
常量在实际组件之外,您无法在其中访问props。在功能组件中也没有“ this”。看下面的代码:
import React from "react";
import LNSelect from "../LNSelect/LNSelect";
import { CountryRegionData } from "react-country-region-selector";
const parsed = CountryRegionData.map(
([country_name, country_code, cities]) => ({
country_name,
country_code,
cities: cities
.split("|")
.map(cityData => cityData.split("~"))
.map(([city_name, city_code]) => ({ city_name, city_code }))
})
);
const getRegions = (countryFromProps) => parsed
.find(country => country.country_name === countryFromProps)
.cities.map(({ city_name, city_code }) => ({
label: city_name,
value: city_code
}));
const LNSelectRegion = (props) => {
return <LNSelect options={getRegions(props.country)} {...props} />;
};
LNSelectRegion.defaultProps = {
country: "United States"
}
export default LNSelectRegion;