Question

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

我已读过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

Answer 1

您所指的文档部分意味着您不得在嵌套的函数，条件，循环内与useState对齐。

通过钩子返回的呼叫设置器肯定是正确且正确的。

Answer 2

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

如何重构React Hooks嵌套函数

2 个答案: