引入react-phone-number-input时metadata参数无效报错求助

这个报错是由于react-phone-number-input v4及以上版本不再默认内置电话号码元数据，需要手动导入并传入组件，或者使用包含元数据的打包版本。以下是几种可行的解决方法：

方法1：导入完整元数据并传入组件 #

修改你的Phone组件代码，添加元数据的导入和传递：

import React, { useState } from 'react'
import PhoneInput from 'react-phone-number-input'
// 导入完整的电话号码元数据
import metadata from 'libphonenumber-js/metadata.full.json'

function Phone() {
  const [value, setValue] = useState()
  return (
    <PhoneInput
      placeholder="Enter phone number"
      value={value}
      onChange={setValue}
      // 将元数据传入组件
      metadata={metadata}
    />
  )
}

export default Phone

方法2：导入精简元数据（减小打包体积） #

如果只需要支持常用国家/地区，可以使用精简版元数据：

import React, { useState } from 'react'
import PhoneInput from 'react-phone-number-input'
// 导入精简版元数据
import metadata from 'libphonenumber-js/metadata.min.json'

function Phone() {
  const [value, setValue] = useState()
  return (
    <PhoneInput
      placeholder="Enter phone number"
      value={value}
      onChange={setValue}
      metadata={metadata}
    />
  )
}

export default Phone

方法3：直接使用包含元数据的打包版本 #

如果不想手动处理元数据，可以直接导入自带元数据的组件包：

import React, { useState } from 'react'
// 导入包含元数据的打包版本
import PhoneInput from 'react-phone-number-input/bundle'

function Phone() {
  const [value, setValue] = useState()
  return (
    <PhoneInput
      placeholder="Enter phone number"
      value={value}
      onChange={setValue}
    />
  )
}

export default Phone

注意事项 #

• 如果项目中未安装libphonenumber-js，需要先执行安装命令：npm install libphonenumber-js
• 不同元数据版本对应不同的国家/地区支持范围，可根据需求选择。

内容的提问来源于stack exchange，提问作者Leaf