时间戳

首页 > 解决方案 > 如何正确重构反应钩子嵌套函数

reactjs - 如何正确重构反应钩子嵌套函数

问题描述

我有一个功能组件，它使用两种状态，并且都根据触发的事件进行更改。

我在 react docs上读过，在嵌套函数或条件中更改状态是个坏主意。我还看到了一些使用 useEffects 的示例，但我不清楚如何正确重构它。

这是我的整个组件：

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

标签： reactjsreact-hooks

解决方案

这很好，您在开始获取时显示加载屏幕，然后在获取完成时将其隐藏......不需要重构

推荐阅读