Question

我正在尝试使用来自 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: "",
        }
      );

Answer 1

您可以使用 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 或浏览器支持。

Answer 2

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

start = pd.datetime(2020,1,1)
end = pd.datetime(2020,1,31)  
index = pd.date_range(start, end)
mockdata = pd.DataFrame()
mockdata['DateOrigin'] = index

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

反应 UseState 真/假

3 个答案: