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

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;

基本上我使用 package 来获取国家和他们的城市/城市代码，然后找到一个作为支柱country传递的特定国家并将其城市映射到label和value数组以用于我有的选择器组件，这个代码的问题是在.find行上，我收到错误Cannot read property 'props' of undefined ，我想解决这个问题，我还想为 country 属性设置一个默认值，以防它为空（ if this.props.country === "" {this.props.country = "United States} )，我该怎么做？

Answer 1

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 2

你不能在功能组件中使用this ，所以你的代码应该是：

const regions = parsed
  .find(country => country.country_name === props.country)
  .cities.map(({ city_name, city_code }) => ({
    label: city_name,
    value: city_code
  }));

您还需要 function 并在此块周围传递 props 参数

const YourComponent = (props) => {
    // your code above
}

Answer 3

const regions function 应该写在传递 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>
  )
}

Answer 4

因为this.props.country中的this是未定义的。 尝试通过 prop 获取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} />;
};

Answer 5

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