用三元运算符反应条件渲染

Question

当屏幕首次加载时，我从服务器获取一些信息并设置状态。 如果用户使用选择菜单并选择其他内容，则会更改状态。

所以，我基本上是想说，如果状态值来自服务器，请显示，或者如果状态值来自用户选择，请使用它。 我还尝试使用 && 来首先确保甚至有一个可用的值。

const [country, setCountry] = useState();

useEffect(() => {
   // get location via public IP lookup and set state of country c 
   //calling code based on IP eg: +44
   setCountry(countryInfo.data);
 }, []);

<Input
name="countryCode"
placeholder={
country && country.location.calling_code ? country.location.calling_code : country.callingCode }
width="20%"
editable={false}
/>

<CountryPicker
  name="country"
  theme={{ fontSize: 14, padding: 30 }}
  countryCode={
    country && country.country_code
      ? country.country_code
      : country && country.cca2
  }
  withCallingCode
  withFilter
  withCountryNameButton={true}
  withFlagButton={false}
  withFlag={false}
  withEmoji={false}
  onSelect={(country) => setCountry(country)}
/>

country.location.calling_code在初始加载时来自服务器，而country.callingCode是用户决定通过下拉列表更改它的情况。

我得到的错误是：

undefined 不是一个对象（评估 country.location.calling_code）

Answer 1

你可以先用这个拖车形状

country && country.location && country.location.calling_code ? country.location.calling_code : country.callingCode

或者这个形状它认为这个形状用于打字稿

country?.location?.calling_code ? country.location.calling_code : country.callingCode

这意味着如果？ 项目 founb 移动到属性

Answer 2

位置也可能不存在，因此请检查以确保它存在。

country && country.location && country.location.calling_code ? country.location.calling_code : country && country.callingCode || ""

或者

country?.location?.calling_code ? country.location.calling_code : country?.callingCode || ""