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

我现在还很陌生，现在我有了一个函数，该函数正在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)
        }}
      />
    </>
}

最佳答案

您当前的useEffect将仅在mount上运行(因为您在use效果[]的末尾添加了空括号)。如果您打算仅一次调用此函数(在挂载时)，则可以将其置于相同的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的私有(private)函数，它将看起来更干净。

关于javascript - ReactJS-如何使用useEffect获取多个数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59969599/