主页 / coding / 问题

问题[object](coding)

Martin Hope
Ooker
Asked: 2024-05-12 03:14:38 +0800 CST
  • 5

在 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