ReactJS 中常见的错误

长久以来的研究节奏，我认为反应可能是一系列的细节，但可能会出现一些意外或错误，导致一些混乱。

在 React 中，我们将启动该过程，并通过它来解决问题。 😅

苏马里奥

• 专有风格，无 JSX
• Acessar um valor que ainda não Existe
• Esquecer a propriedade key quando exibindo uma lista
• Verificando se uma lista está vazia 验证

专有风格，无 JSX

JSX 的结构与经典 HTML 类似。不同之处在于，它是文献资料，也是事实。无论如何，我们都不能将className其class视为属性或财产的价值style。

没有HTML属性或值、字符串、escrevemos parecido com 或CSS padrão：

<button style="height: 3rem; background-color: blue;">
  A really cool button
</button>

JSX 的基本属性是 javascript 对象格式和使用驼峰式命名法，以实现与复合材料相关的属性。

更棒的是！🧐

除了 JSX 的属性之外，还有其他的勇气：

return (
  <input placeholder={"My beautiful input"} />
)

Porém, quando se trata da propriedade styleprecisamos inserir mais um par de chaves para que consigamos atribuir os valores de nossos estilos:

return (
  <button style={{ height: "3rem", backgroundColor: "blue" }}>
    A really cool button
  </button>
)

请注意，如果您的首选服务是在表达式槽中提供的，则可以通过 javascript 来实现条件三项的示例。第二个对象是javascript竞争的对象。

Acessar um valor que ainda não Existe

Digamos que você possui um estado queguardará bados que Serão providos por uma api, então tentará exibir valores da seguinte forma:

import React from 'react';

export const PokemonsList = () => {
  const [pokemons, setPokemons] = React.useState();

  React.useEffect(() => {
    fetch("https://pokeapi.co/api/v2/pokemon")
      .then((response) => response.json())
      .then((data) => setPokemons(data.results));
  }, [])

  return (
    <div>
      {pokemons.map((pokemon) => (
        <h2>{pokemon.name}</h2>
      ))}
    </div>
  );
}

E então, vemos or seguinte erro ao tentar iterar pokemons.map():

  Cannot read properties of undefined (reading 'map')

一个必要的条件，即最初的时刻，一个与初始状态相关的勇气的变化pokemons（que nesse caso deixamos vazio），或seja undefined：。

解析器的格式如下：

• 开始或排列方式：

- const [pokemons, setPokemons] = React.useState();
+ const [pokemons, setPokemons] = React.useState([]);

• 使用可选链式调用：

- {pokemons.map((pokemon) => ( 
+ {pokemons?.map((pokemon) => (

如果您的目标不存在，请使用?.javascript 来返回错误undefined。

使用可选链接永远是对象的null属性undefined！ ☝🤓

Esquecer a propriedade key quando exibindo uma lista

渲染和使用列表中的内容.map，以及 React 的基本要素：属性key。

  Warning: Each child in a list should have a unique "key" prop.

全部渲染列表中，最重要的是与 React consiga identificar cada 项目相关的上下文。 E o valor da propriedade keydeve ser único。
请注意以下事项index：

return (
  <div>
    {pokemons.map((pokemon, index) => (
      //usando index
      <h2 key={index}>{pokemon.name}</h2>
    ))}
  </div>
);

⚠️ Mas em alguns casos, isso é uma má ideia。 ⚠️

O valor índex não está ligado a cada item específico da lista, mas sim a suas posições.

根据清单中的顺序，React 会参考性能、渲染和访问方面的结果和问题。

Para evitar tais devemos atribuir um valor realmente único de cada item. Em nosso caso, onde estamos usando bados de uma api externa, é esperado que todo item tenha um idúnico:

return (
  <div>
    {pokemons.map((pokemon) => (
      //usando id
      <h2 key={pokemon.id}>{pokemon.name}</h2>
    ))}
  </div>
);

Mas em casos onde tal valor não Existe, podemos criar o nosso próprio idúnico da seguinte maneira:

const pokemonsWithoutIds = fetch("/pokemons/without-ids")
  .then((response) => response.json())
  .then((data) => return data.results);

//criando uma nova lista
const pokemonsWithIds = pokemonsWithoutIds.map(item => {
  return {
    ...item,
    //atribuindo um id único para cada item
    id: crypto.randomUUID(),
  };
});

使用的方法crypto.randomUUID是全面安全的，我可以为所有操作提供支持。

恢复方法0bf9b4a4-6bb4-11ee-b962-0242ac120002是通用唯一标识符。

Verificando se uma lista está vazia 验证

Digamos que nosso objetivo émostrar condicionalmente uma lista somente quando ela não etiver vazia.接下来的形式：

const [pokemons, setPokemons] = React.useState([]);

return (
  <div>
    {pokemons.length && <PokemonList pokemonsData={pokemons} />}
  </div>
);

Em nosso HTML veremos um simples 0。 Isso ocorre porque diferente de outros valores falsy ( "", false, null), or número 0 é válido dentro do JSX.最后，还有一些情况。

重要信息是length0: pokemons.length > 0 &&。
您可以使用以下验证器：

return (
  <div>
    {pokemons.length ? (
      <PokemonList pokemonsData={pokemons} />
    ) : null}
  </div>
);

Por hoje é so！ 🫡
Acha que faltou algo que não citei？
Ficou com alguma dúvida？
Deixa nos commentários ou me manda uma mensagem no Twitter/X。

好的，请阅读！<3