类型“string”不可分配给类型“E164Number”|反应电话号码输入

Question

我正在使用一个包react-phone-number-input 我有 2 个文件： 索引.tsx, useLogicRegister.ts

我提供了部分代码，其中出现错误 类型“字符串”不可分配给类型“E164Number”

我也尝试将字符串解析为phoneNumber，但仍然不起作用。

const parsedPhone = parsePhoneNumber(phone) || '';

index.tsx 文件具有phoneInput 的UI，useLogicRegister.ts 文件具有props、hooks 和接口 handlePhoneChange 方法。

这是index.tsx的UI代码部分

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useLogicRegister } from './useLogicRegister';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';

const Register: React.FC = () => {
const navigate = useNavigate();
const {     
    firstname,
    lastname,
    email,
    password,
    phone
    } = useLogicRegister(navigate);
}
  return (
               <PhoneInput 
                    rules={{ required: true }}
                    placeholder="Enter phone number"
                    value={phone} 
                    defaultCountry="US" 
                    className="form-control"
                    onChange={handlePhoneChange}                    
                    />
);
};

export default Register;

这里是useLogicRegister.ts

import { useState } from 'react';
import { NavigateFunction } from 'react-router-dom';
import { login } from '../../../store/authSlice';
import { useDispatch } from 'react-redux';

interface useLogicRegisterProps {
    email: string;
    phone: string;
    password: string;
    firstname: string;
    lastname: string;
    handlePhoneChange: (value: string | undefined) => void;
  }

export const useLogicRegister = (navigate: NavigateFunction ): useLogicRegisterProps => {
    const dispatch = useDispatch();
    const [email, setEmail] = useState('');
    const [phone , setPhone]  = useState('');
    const [password, setPassword] = useState('');
    const [firstname, setFirstname] = useState('');
    const [lastname, setLastname] = useState('');
  
   
      const handlePhoneChange = (value: string | undefined) => {
        if (value) {
          setPhone(value);
        }
      };
  
    return {
      email,
      phone,
      password,      
      firstname,
      lastname     
    };
  };

Answer 1

您可以从库中导入

E164Number

类型别名。只需将导入更新为

import PhoneInput, { type Value } from 'react-phone-number-input'

。并在界面中使用这个类型

interface useLogicRegisterProps {
    email: string;
    phone: Value;
    password: string;
    firstname: string;
    lastname: string;
    handlePhoneChange: (value: Value | undefined) => void;
}