Cómo refactorizar el funcionamiento correcto de los ganchos anidados de reacción

V. Sambor

Tengo un componente de función que usa dos estados y ambos se cambian según el evento desencadenado.

He leído en los documentos de reacción que es una mala idea cambiar los estados en una función o condición anidada. También vi algunos ejemplos usando useEffects, pero no tengo una idea clara de cómo refactorizar esto correctamente.

aquí está todo mi componente:

import React, { useState, useEffect } from 'react'
import './App.css'
import AppHeader from '../app-header'
import AppFooter from '../app-footer'
import SearchInput from '../search-input'
import Stats from '../stats'
import Chart from '../chart'
import { getBundleInfoAPI } from '../../services/hostApi'
import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css'
import Loader from 'react-loader-spinner'

function App() {
  const [isSpinnerVisible, setSpinnerVisible] = useState(false)
  const [bundleData, setBundleData] = useState({})

  const _handleOnItemSelected = (item) => {
    if (item && item.package && item.package.name && item.package.version) {
      setSpinnerVisible(true)
      getBundleInfoAPI(item.package.name, item.package.version)
        .then(resposeData => setBundleData(resposeData))
        .finally(() => setSpinnerVisible(false))
    } else {
      // TODO - implement an error handler component?
      console.warn('WARNING: The selected bundle does not have name or version!')
    }
  }

  return (
    <div className="app">
      <AppHeader />

      <main>
        <SearchInput onItemSelected={_handleOnItemSelected} />

        <div className="app-main-inner-container">
          <Loader type="Triangle" color="#00BFFF" height={200} width={200} visible={isSpinnerVisible} />

          {!isSpinnerVisible &&
            <div className="app-stats-chart-container">
              <section className="app-stats-container"><Stats size={bundleData.stats} /></section>
              <section className="app-chart-container"><Chart bundleChartData={bundleData.chart} /></section>
            </div>
          }
        </div>
      </main>

      <AppFooter />
    </div>
  )
}

export default App
Skyboyer

La sección de documentos a la que se refiere significa que no debe poner una línea useStatedentro de funciones, condiciones o bucles anidados.

Llamar al colocador devuelto por el gancho es definitivamente correcto y correcto.

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

¿Cómo simulamos los valores de estado para el componente de reacción usando ganchos de reacción en Jest?

¿Cómo determinan los ganchos de reacción el componente para el que son?

¿Cómo restablecer el estado de los ganchos de reacción?

¿Cómo refactorizar los mapas planos anidados cuando necesito tanto el contexto como la respuesta mono de una función de biblioteca?

¿Cómo reaccionan los componentes de notación de puntos con los ganchos de reacción?

¿Cómo realizar una prueba unitaria de los ganchos de reacción mediante el montaje superficial de los componentes funcionales de React?

¿Cómo utilizar los ganchos de reacción de forma eficaz?

Cómo guardar valores de MultiSelect en el formulario de reacción de MultiStep usando ganchos

Cómo guardar valores de MultiSelect en el formulario de reacción de MultiStep usando ganchos

¿Cómo actualizar el estado de la matriz de ganchos de reacción?

¿Cómo actualizar el estado de la matriz de ganchos de reacción?

¿Cómo insertar un nuevo valor en la matriz actual usando los ganchos de reacción?

Llamada de gancho no válida. Los ganchos solo se pueden llamar dentro ... cómo solucionar esto manteniendo el componente de clase de reacción

Cómo actualizar el estado en sí mismo usando ganchos de reacción

Estado de los ganchos de reacción: Indefinido

La carga no se muestra en los ganchos de reacción

Comprender los ganchos de suspenso y reacción

El estado de los ganchos de reacción no es el último cuando se usa desde una devolución de llamada sin reacción

Comprender el funcionamiento de los punteros en C ++

No entiendo el funcionamiento correcto de la subcadena en Pandas

los ganchos de reacción deben llamarse en una función de reacción. ¿Cómo cambio la sintaxis para corregirla?

los ganchos de reacción deben llamarse en una función de reacción. ¿Cómo cambio la sintaxis para corregirla?

¿Cómo puedo actualizar mi componente de reacción con el uso de ganchos de manera funcional?

¿Cómo se calcula el tiempo de ejecución de los bucles "for" anidados?

Obtener el valor del botón al hacer clic en los ganchos de reacción del botón

¿Cómo hacer el posicionamiento correcto de los elementos CSS?

¿Pueden los componentes de reacción anidados tener diferentes accesorios?

El estado del contexto de los ganchos de reacción no está definido al actualizar la página

¿Es bueno usar el siguiente en los ganchos de reacción o cualquier alternativa para actualizar la interfaz de usuario?

TOP Lista

CalienteEtiquetas

Archivo