Morioh
Login
Sérgio Oliveira

Sérgio Oliveira

6 months ago

Como mostrar e ler dados de lista dinâmica no React

Dados de lista dinâmica refere-se a um tipo de estrutura de dados que permite listas flexíveis e adaptáveis ​​dentro de aplicativos de software. Contrasta com listas estáticas, que possuem conteúdo e estrutura fixos.

Neste tutorial aprenderemos como construir uma lista dinâmica, ler valores e exibi-la através do componente funcional do navegador na aplicação React.js. No contexto de um aplicativo React, uma lista dinâmica geralmente é criada usando o método map() para iterar sobre uma matriz de dados e renderizar um item de lista para cada item da matriz. atualizando a matriz para refletir as alterações.

Índice

  • Etapa 1: instalar o projeto React
  • Etapa 2: adicionar dependências externas
  • Etapa 3: Criar componente de função
  • Etapa 4: ler os valores da lista dinâmica
  • Etapa 5: atualizar o componente App.js
  • Etapa 6: execute o servidor React

Etapa 1: Instalar o projeto React

Temos o objetivo principal de ler itens de lista dinamicamente no React. Portanto, construiremos um novo projeto React usando o comando fornecido.

npx create-react-app my-react-app

Navegue até a pasta do projeto usando o comando `cd` seguido do nome do projeto:

cd my-react-app

Etapa 2: adicionar dependências externas

Precisamos de certos pacotes para construir a funcionalidade desejada; execute o seguinte comando para adicionar os pacotes axios e bootstrap.

npm install axios bootstrap --legacy-peer-deps

Etapa 3: Criar componente de função

Um componente de função é uma função JavaScript normal que contém o código para resolver um problema específico.

Crie uma nova pasta com o nome dos componentes; depois disso, crie o novo arquivo Users.js e coloque o seguinte código dentro do arquivo.

import React from 'react'
function Users() {
  return (
    <div></div>
  )
}
export default Users

Etapa 4: ler os valores da lista dinâmica

Você deve abrir o components/Users.js e neste arquivo você deve colocar o seguinte código.

import React, { useState, useEffect } from "react";
import axios from "axios";
function Users() {
  const Endpoint = "https://jsonplaceholder.typicode.com/users";
  const [userData, setUserData] = useState([]);
  const getUserData = async () => {
    try {
      const fetchData = await axios.get(Endpoint, {
        headers: {
          authorization: "Bearer JWT Token",
        },
      });
      setUserData(fetchData.data);
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    window.addEventListener("load", getUserData);
    console.log(userData);
    return () => {
      window.removeEventListener("load", getUserData);
    };
  }, [userData]);
  return (
    <div className="container mt-5">
      <h2 className="mb-4">React Read Dynamic List Values Example</h2>
      {userData.map((item) => {
        return (
          <li className="card p-3 mb-2" key={item.id}>
            <div className="card-body">
              <p className="card-text">{item.username}</p>
            </div>
          </li>
        );
      })}
    </div>
  );
}
export default Users;

Etapa 5: atualizar o componente App.js

Iremos importar o componente Users no arquivo App.js; certifique-se de importar e usar o componente conforme fornecido abaixo no arquivo do componente principal.

import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import Users from './components/Users.js'
function App() {
  return (
    <div>
      <Users />
    </div>
  )
}
export default App;

Etapa 6: Execute o React Server

Inicie o servidor React executando o seguinte comando:

npm start

Finalmente, seu servidor de desenvolvimento react iniciará o aplicativo react em:

http://localhost:3000

Conclusão

Neste tutorial, aprendemos como exibir valores de lista dinâmica em React js. Também mostramos como ler valores de lista usando o método de array map() no React.

1.55 GEEK