主页 / coding / 问题 / 78465832
Accepted
Ooker
Asked: 2024-05-12 03:14:38 +0800 CST

如果通过 JSX 元素访问对象键，为什么它们会变得未定义？

  • 772

在 Preact 中，我想显示一个对象：

export default function Component() {
  const obj = { a: 'a', b: 'b'} 
  const elements = [];
  for (const [key, value] of Object.entries(obj)) {
    elements.push(<>{key}: {value}<br></br></>)
  }
  return (
    <article>
      {elements}
    </article>
  );
}

这返回正常：

a: a
b: b

但是，如果我将该元素提取到一个单独的 JSX 元素中，如下所示：

function Element({ key, value }) {
  return (<>{key}: {value}<br></br></>);
}
export default function Component() {
  const obj = { a: 'a', b: 'b'} 
  const elements = [];
  for (const [key, value] of Object.entries(obj)) {
    // elements.push(<>{key}: {value}<br></br></>)
    elements.push(<Element key={key} value={value} />)
  }
  return (
    <article>
      {elements}
    </article>
  );
}

然后键全部变得未定义：

: a
: b

为什么会出现这种情况？

操场

object

1 个回答

  1. Best Answer

    key是 (p)react 中的一个特殊 prop，框架使用它作为如何安全有效地重新排列元素的提示。您需要使用另一个道具。

    有关按键的快速说明，请继续阅读。

    以下面的示例作为组件渲染的结果。

    第一次渲染 第二次渲染 
    <article>
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </article>
    		 
    <article>
      <div>a</div>
      <div>c</div>
    </article>

    这里的问题是不清楚做了什么：

    • a) 第二个项目是否已被删除，或者
    • b) 第三项是否已被删除，第二项的文本是否已更改？

    (p)react 只能猜测，这就是我们使用密钥的原因。

    第一次渲染 第二次渲染 
    <article>
      <div key="a">a</div>
      <div key="b">b</div>
      <div key="c">c</div>
    </article>
    		 
    <article>
      <div key="a">a</div>

      <div key="c">c</div>
    </article>

    有了键，(p)react 就能够正确、快速地更新列表，因为它确切地知道发生了什么（b 被删除）。

    Preact 的教程有一整节关于按键的内容，如果您想了解更多信息：https://preactjs.com/tutorial/08-keys

    • 1

相关问题