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

因此，我有以下功能组件：

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;

基本上，我使用一个包获取国家及其城市/城市代码，然后查找作为prop country传递的特定国家，并将其城市映射到标签和值数组中，以便在选择器组件上使用，此代码的问题是在.find行上，我遇到了无法读取未定义属性“props”的错误，我想解决这个问题，我还想为country属性设置一个默认值，以防它为空。如果this.props.country=={this.props.country=United}，我怎么做呢？

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

const regions函数应该写在props传递到的功能组件内部

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

您不能在功能组件中使用此选项，因此您的代码应为：

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
}

您不能在功能组件中使用此选项，因此您的代码应为：

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
}

原因this.props.country中的此项未定义。试着通过道具获得区域

原因this.props.country中的此项未定义。试着通过道具获得区域

---

1在functional component中，您可以使用道具而不是this.props获取道具

2你只能在你的功能区内获得道具

所以我只是在这个标准上重新编写代码，希望它能工作

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;

---

1在functional component中，您可以使用道具而不是this.props获取道具

2你只能在你的功能区内获得道具

所以我只是在这个标准上重新编写代码，希望它能工作

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;

您解析的区域和常量在实际组件之外，您无法访问那里的道具。功能组件中也没有“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;

您解析的区域和常量在实际组件之外，您无法访问那里的道具。功能组件中也没有“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但在复制粘贴代码时，我将其保留在那里，也感谢您的审阅，正如我前面提到的，不使用this.props，但在复制粘贴代码时，我将其保留在那里