Question

所以我有以下反应功能组件：

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数组中供我使用的选择器组件使用，此代码的问题是在.find行上，出现错误Cannot read property 'props' of undefined，我想解决这个问题，我也想设置国家道具的默认值（如果为空（if this.props.country === "" {this.props.country = "United States}），我该怎么做？

Answer 1

您不能在功能组件中使用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
}

Answer 2

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;

Answer 3

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>
  )
}

Answer 4

原因$.isNumeric("dfd")中的this未定义。尝试传递道具以获得this.props.country

regions

Answer 5

您的parsed和regions const在实际组件之外，您无法在其中访问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;

无法读取功能组件中未定义的属性“ props”

5 个答案: