Javascript 无法读取属性'；拆分'；以下代码中未定义的

为什么此处未定义拆分属性？我通过axios从我的产品api获取了产品，我收到了具有一些属性（名称、描述等）的json数据。

而它在这里工作得很好

const [product, setProduct] = useState({});
const [desc,setDesc]=useState("");
  useEffect(() => {
    const getProduct = async () => {
      try {
        const res = await axios.get(`/products/${props.match.params.id}`);
        setProduct(res.data);
        setDesc(res.data.description);
      } catch (error) {
        console.error(error);
      }
    };
    getProduct();
    //eslint-disable-next-line
  }, []);
  
  const substrings = desc.split(".");

---

有人能告诉我们为什么会这样吗？

我认为在加载产品之前，产品的值为null或{}， 因此，当您使用product.description时，该值将是未定义的。 您可以使用：

const子字符串=（产品？.description | |“）。拆分（“.”）；

我认为这里的问题是您使用

useState

声明

产品的方式。对于第二部分，您直接声明
描述
，因此在拆分它时，它可能是空字符串或您声明的任何内容，但不是未定义的

但是对于第一部分，只声明
产品
变量，而不声明
说明
属性。因此，在获取之前，当您尝试拆分
product.description
时，它是未定义的，并且在获取之后成为一个值

为了修复此问题，您可以这样声明产品：

const[product，setProduct]=useState（{description:“}）
或只需像这样使用
？
运算符：
const substring=product.description？.split（“.”）

还有一个问题，因为您首先将
子字符串
声明为空数组，然后再次将其声明为
常量
在第一个示例中，什么是
产品
？初始状态值是否为空字符串？@Jayce444请检查更新的代码。product最初是一个带有空arrayOk的状态值，因此问题是在第一个示例中，
product
最初是一个空对象，因此
product.description
未定义。因此，当您尝试访问
product.description.split
时，您会遇到一个逻辑错误，即尝试访问未定义的内容的
.split
。您可能会说您执行了一个API请求来获取产品信息并将其存储在状态中，但是获取该信息（以及设置状态本身）都是异步的，因此它们会延迟到第一次渲染之后。因此，最初，当它尝试渲染时，
product.description
是undefined@jayce444知道了！！非常感谢。是的，它工作得很好！但是我不能理解上面的一行。@Pikachu只处理字符串，所以如果你的值不是字符串，你会得到错误。语法？。如果产品不是对象，则返回未定义
const [product, setProduct] = useState({});
const [desc,setDesc]=useState("");
  useEffect(() => {
    const getProduct = async () => {
      try {
        const res = await axios.get(`/products/${props.match.params.id}`);
        setProduct(res.data);
        setDesc(res.data.description);
      } catch (error) {
        console.error(error);
      }
    };
    getProduct();
    //eslint-disable-next-line
  }, []);
  
  const substrings = desc.split(".");