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

Question

在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

为什么会出现这种情况？

游乐场

Answer 1

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