javascript - ReactJS - 如何使用 useEffect 获取多个数据

Question

我对 react 还很陌生，现在我有一个函数可以在我的 useEffect Hook 中获取一些数据，使用加载状态来管理组件渲染，然后用它加载我的状态组件数据，一切正常。

但现在我必须实现另一个函数来获取其他一些数据。

如何以最佳方式实现这一点？我需要为另一个获取函数创建另一个 useEffect 吗？

这是我的代码:

export default function Home() {
  const [ageOptions, setAgeOptions] = useState([])
  const [age, setAge] = useState('')
  const [loading, setLoading] = useState(false)

  // get age option from API
   useEffect(() => {
    setLoading(true)
    const fetchAgeOptions = () => {
     // transform the data to load properly in my react-select component
      function transform(data) {
        const options = data.map(function (row) {
          return { value: row.id, label: row.description, startAge: row.startAge, endAge: row.endAge }
        })
        setAgeOptions(options)
        setLoading(false)
      }
      api.get('someurl.com').then(response =>
        Object.values(response.data.rows)).then(data => transform(data))
    }
    fetchAgeOptions()
  }, [])


  return loading ? <div>Loading...</div> :
    <>
      <label>Age level</label>
      <Select
        value={age}
        options={ageOptions}
        placeholder="All"
        onChange={val => {
          setAge(val)
        }}
      />
    </>
}

Answer 1

使用全部 promise

   useEffect(() => {
    setLoading(true)
    const fetchMethod1 = () =>{...}
    const fetchMethod2 = () =>{...}
    const fetchMethod3 = () =>{...}
    const fetchMethodN = () =>{...}
  Promise.all([fetchMethod1,fetchMethod2,fetchMethod3,fetchMethodN]).then(data=>{
// DATA IS AN ARRAY AND THEY ARE IN ORDER AS PLACED IN 
})
    
  }, [])