为什么我们在 React js 中定义常量变量时使用花括号？

我编写以下代码来从 props 中获取标题。前：

export default function Articleinfo(props) {
    const  {edge}  = props.data.allNodeArticle;
    
    return(
        <>
          <div>
              <h1>Title:{edge[0].title}</h1>
              <h2>info:</h2>
          </div>
        </>
    );
};

我收到此错误：无法读取未定义的属性（读取“0”）

但是之后：当我删除花括号时它起作用了

export default function Articleinfo(props) {
    const  edge  = props.data.allNodeArticle;
    console.log(edge.nodes[0].title);
    const Title = edge.nodes[0].title;
    return(
        <>
          <div>
              <h1>Title:{edge.nodes[0].title}</h1>
              <h2>info:</h2>
          </div>
        </>
    );
};

有人能解释一下为什么会这样吗？它背后的概念是什么？