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

Question

我对反应还很陌生，现在我有一个函数可以在我的 useEffect钩子中，使用加载状态来管理组件渲染，然后使用该数据加载我的状态组件，一切正常。

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

如何以最好的方式实现这一点？我是否需要创建另一个useEffect为另一个 fetch 函数？

这是我的代码：

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

您当前的 useEffect 将仅在 mount 上运行（因为您在 use Effect 末尾添加了空括号 []）。如果您计划仅调用此函数一次（在挂载时），那么您可以将其放在同一个 useEffect 中。如果你想在每次状态更新时调用一个函数，那么你所要做的就是创建一个单独的 useEffect 并将状态作为依赖项。

useEffect(() => {

  }, ['variable-here-on-update-will-call-whatever-is-in-the-useEffect'])

这是我的一个例子：

//will run on componentDidMount
useEffect(() => {
  setError(false);
}, []);

//will run if error is updated in parent component
useEffect(() => {
  if (error && error.body) {
    setError(true);
  }
}, [error]);

我还建议您在调用时从 useEffect 中取出“fetchAgeOptions”函数（并将其添加到上面）。这样它就不是 useEffect 的私有函数，并且看起来会更干净。