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

问题描述 投票:0回答:5

所以我具有以下反应功能组件:

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传递的特定国家,并将其城市映射到labelvalue数组中,以供选择器组件I使用有,此代码的问题是在.find行上,我收到错误Cannot read property 'props' of undefined,我想解决此问题,并且还想为country prop设置默认值,以防空白(if this.props.country === "" {this.props.country = "United States}),我该怎么办?

javascript reactjs
5个回答
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
}

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;

0
投票

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

0
投票

原因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} />;
};

0
投票

您的parsedregions常量在实际组件之外,您无法在其中访问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;
© www.soinside.com 2019 - 2024. All rights reserved.