反應 UseState 真/假

Question

我正在嘗試使用來自 redux 存儲的數據為我的表單組件初始化一些 state。 如果 shippingAddress object 是 null，我想將 formData object 的屬性設置為空字符串。 不知道如何讓它工作。 目前我收到一條錯誤消息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: "",
        }
      );

Answer 1

您可以通過三元組來完成此操作，以首先嗅探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: "",
    }
);

或者，您可以使用可選鏈接?. 和無效的合並?? 操作符來達到同樣的效果：

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 或瀏覽器支持。

Answer 2

添加安全檢查（試試這個）

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,
  }
);

Answer 3

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: "",
});