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

Question

我编写了以下代码以从 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>
        </>
    );
};

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

Answer 1

大括号用于对象解构

在下面的 link 中解释了对象析构的语法

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring

所以当你这样做时

    const  {edge}  = props.data.allNodeArticle;

这意味着对象 allNodeArticle 有一个名为 edge 的键并且您正在访问它

但是，当您执行以下操作并出现错误时，这意味着 allNodeArticle 不是具有键边的对象，而是具有数组节点。

const  edge  = props.data.allNodeArticle;
console.log(edge.nodes[0].title);