Início / coding / Perguntas / 78465832
Accepted
Ooker
Asked: 2024-05-12 03:14:38 +0800 CST

Por que as chaves dos objetos ficam indefinidas se são acessadas por meio de um elemento JSX?

  • 772

No Preact, quero exibir um objeto:

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>
  );
}

Isso retorna bem:

a: a
b: b

No entanto, se eu extrair o elemento em um elemento JSX separado como este:

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>
  );
}

Então todas as chaves ficam indefinidas:

: a
: b

Por que isso acontece?

Parque infantil

object

1 respostas

  1. Best Answer

    keyé um suporte especial em (p)react, usado pela estrutura como uma dica de como reorganizar os elementos com segurança e eficiência. Você precisará usar outro adereço.

    Para uma explicação rápida das teclas, continue lendo.

    Veja o exemplo a seguir como resultado de uma renderização de componente.

    Primeira renderização Segunda renderização 
    <article>
      <div>a</div>
      <div>b</div>
      <div>c</div>
    </article>
    		 
    <article>
      <div>a</div>
      <div>c</div>
    </article>

    O problema aqui é que não está claro o que foi feito:

    • a) o segundo item foi removido, ou
    • b) o terceiro item foi retirado e o texto do segundo item alterado?

    (p)react só poderia adivinhar, e é por isso que usamos chaves.

    Primeira renderização Segunda renderização 
    <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>

    Com as chaves, o (p)react consegue atualizar a lista de maneira correta e rápida, pois sabe exatamente o que aconteceu (b foi removido).

    O tutorial do Preact tem uma seção inteira sobre chaves, caso você queira saber mais: https://preactjs.com/tutorial/08-keys

    • 1

relate perguntas