为何在Preact中通过JSX组件访问对象键值会变为undefined？

你遇到的问题核心在于**key是Preact的特殊属性，不会作为组件props传递到组件内部**。

错误原因解析 #

在列表渲染场景中，key是Preact用来追踪元素唯一性、优化重渲染效率的特殊标识。当你给组件传递key={key}时，Preact会直接将该值用于diff算法的对比逻辑，不会把它纳入组件的props对象中。因此你的Element组件尝试解构{ key, value }时，key会是undefined，最终渲染出: a、: b这类缺失键名的结果。

解决方法 #

将组件接收的键名参数换成非key的名称（比如propKey），同时保留key作为列表元素的唯一标识：

function Element({ propKey, value }) {
  return (<>{propKey}: {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(<Element key={key} propKey={key} value={value} />)
  }
  return (
    <article>
      {elements}
    </article>
  );
}

这样既满足了Preact对列表元素key的要求，又能在组件内部正常获取并渲染键名。

内容的提问来源于stack exchange，提问作者Ooker