仅反应电话输入2个国家/地区道具不使用数组

Question

我使用react-phone-input-2库来显示电话号码字段。我只需要通过选定的国家代码。我正在从服务器获取iso2countrycodes，并将iso2CountaryCodes传递给我的Phone输入组件。在控制台中，当组件渲染时，我可以看到国家列表，但屏幕上的国家列表下拉列表没有更新。以下是电话输入的代码片段：

const MyPhoneInput = ({ formControl, country, defaultPhoneNumber, onPhoneNumberChange, hasError, iso2CountryCodes }) => {
console.log("In phone input", iso2CountryCodes);   
console.log("In phone input country", country);
return (
<PhoneInput
country={country}
value={defaultPhoneNumber}
onChange={onPhoneNumberChange}
onlyCountries={iso2CountryCodes}
preferredCountries={["iq", "gb"]}
inputProps={{
name: formControl,
required: true,
id: formControl
}}
inputClass={`${hasError ? "error" : ""}`}
containerClass="myPhoneInput"
/>
)
}
export default MyPhoneInput;

下面是我将数据传递给子组件的父组件的代码：

<Controller
control={control}
defaultValue=""
name="phoneNumber"
render={({ onPhoneNumberChange }) => {
return (
<MyPhoneInput formControl="phoneNumber" country="us" defaultPhoneNumber="" hasError={errors.phoneNumber} onPhoneNumberChange={onPhoneNumberChangeHandler} iso2CountryCodes={iso2CountryCodes} />
);
}}
rules={{ required: true }}
/>

如果我遗漏了什么，请告诉我。(我是新手，所以欢迎任何关于优化我的代码的好建议(。谢谢

Answer 1

我通过向phoneInput组件添加一个键来解决这个问题，以便在父组件更改时重新发送它。根据描述，问题是react phone input2下拉列表，在传递动态数组时没有重新渲染。为了更改引用，我使用对象从父组件传递了它。以下是我所做的改变，希望它能帮助其他人：内部使用父组件的效果挂钩：

const [phoneInputObj, setPhoneInputObj] = useState({});
useEffect(()=>{
if (iso2CountryCodes){
let defaultCountry =  (iso2CountryCodes?.length>0? iso2CountryCodes[0]: 'us');
let defaultCountryCode = (defaultValues.countryCode ? defaultValues.countryCode .toLowerCase(): defaultCountry);
setPhoneInputObj({
"iso2List": [...iso2CountryCodes],
"randomKey":Math.random(),
"defaultCountryCode":defaultCountryCode
});
}
},[iso2CountryCodes]);

将PhoneInputObj作为道具从我的表单传递给PhoneInput组件(父组件(：

<MyPhoneInput formControl="phoneNumber"  defaultPhoneNumber= 
{phoneNumberValue} hasError={errors.phoneNumber} onPhoneNumberChange= 
{onPhoneNumberChangeHandler} phoneObj={phoneInputObj}/>

内部MyPhoneInput组件

<PhoneInput
country={phoneObj.defaultCountryCode}
value={defaultPhoneNumber}
onChange={onPhoneNumberChange}
onlyCountries={phoneObj.iso2List}
inputProps={{
name: formControl,
required: true,
id: formControl
}}
inputClass={`${hasError ? "error" : ""}`}
containerClass="myPhoneInput"
key={phoneObj.randomKey}

/>