反应 UseState 真/假答案

【问题标题】：React UseState truthy/falsy反应 UseState 真/假
【发布时间】：2021-04-11 15:06:04
【问题描述】：

我正在尝试使用来自 redux 存储的数据为我的表单组件初始化一些状态。如果 shippingAddress 对象为空，我想将 formData 对象的属性设置为空字符串。不知道如何让它工作。目前我收到一条错误消息saying TypeError: Cannot read property 'address' of null

const cart = useSelector((state) => state.cart);
const { shippingAddress } = cart;
    
const [formData, setFormData] = useState(
        {
          address: shippingAddress.address,
          city: shippingAddress.city,
          country: shippingAddress.country,
          postalCode: shippingAddress.postalCode,
        } || {
          address: "",
          city: "",
          country: "",
          postalCode: "",
        }
      );

【问题讨论】：

请修改您的帖子标题，提出一个明确、具体的问题。

标签： javascript reactjs redux react-redux use-state

【解决方案1】：

添加安全检查（试试这个）

const cart = useSelector((state) => state.cart);
const defaultValues = {
  address: "",
  city: "",
  country: "",
  postalCode: "",
}

const { shippingAddress = defaultValues  } = cart;
const [formData, setFormData] = useState(
  {
    address: shippingAddress.address,
    city: shippingAddress.city,
    country: shippingAddress.country,
    postalCode: shippingAddress.postalCode,
  }
);

【讨论】：

【解决方案2】：

const cart = useSelector((state) => state.cart);
const {
    shippingAddress
} = cart;
const [formData, setFormData] = useState(shippingAddress ? {
    address: shippingAddress.address,
    city: shippingAddress.city,
    country: shippingAddress.country,
    postalCode: shippingAddress.postalCode
} : {
    address: "",
    city: "",
    country: "",
    postalCode: "",
});

【讨论】：

【解决方案3】：

您可以使用ternary 来完成此操作，以首先嗅探shippingAddress 的存在/不存在：

const cart = useSelector((state) => state.cart);
const { shippingAddress } = cart;
    
const [formData, setFormData] = useState(
  shippingAddress
    ? {
      address: shippingAddress.address,
      city: shippingAddress.city,
      country: shippingAddress.country,
      postalCode: shippingAddress.postalCode,
    }
    : {
      address: "",
      city: "",
      country: "",
      postalCode: "",
    }
);

或者，您可以使用optional chaining ?. 和nullish coalescing ?? 运算符来实现相同的效果：

const cart = useSelector((state) => state.cart);
const { shippingAddress } = cart;
    
const [formData, setFormData] = useState(
  {
    address: shippingAddress?.address ?? '',
    city: shippingAddress?.city ?? '',
    country: shippingAddress?.country ?? '',
    postalCode: shippingAddress?.postalCode ?? '',
  }
);

请注意，第二个选项是较新的 JS 功能，因此请检查您是否有 Babel 或浏览器支持。

【讨论】：

是的，第二个效率较低，但更易于阅读:)
明白了。谢谢。按预期工作。不知道可选链，谢谢提醒