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

我是个新手，现在我有一个函数，在我的

useffect

hook中获取一些数据，使用加载状态管理组件渲染，然后用这些数据加载我的状态组件，一切正常

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

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

useffect

这是我的密码：

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)
        }}
      />
    </>
}

导出默认函数Home（）{
const[ageOptions，setAgeOptions]=useState（[]
常量[年龄，设置]=使用状态（“”）
常量[loading，setLoading]=useState（false）
//从API获取年龄选项
useffect（（）=>{
设置加载（真）
常量fetchAgeOptions=（）=>{
//转换数据以在我的react select组件中正确加载
函数转换（数据）{
const options=data.map（函数（行）{
返回{value:row.id，label:row.description，startAge:row.startAge，endAge:row.endAge}
})
设置选项（选项）
设置加载（错误）
}
get（'someurl.com'）。然后（响应=>
Object.values（response.data.rows））。然后（data=>transform（data））
}
fetchAgeOptions（）
}, [])
返回装载？装载…：
年龄层次
{
设定值（val）
}}
/>
}

您当前的useEffect将仅在装载时运行（因为您在use effect[]的末尾添加了空括号）。如果您计划只调用此函数一次（挂载时），则可以将其置于相同的useEffect中。如果您想在每次更新某个对象的状态时调用某个函数，那么您所要做的就是将该状态作为依赖项进行单独的useffect

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的私有函数，看起来更干净。

您可能希望创建一个名为useFetch的自定义钩子，其中包含useEffect和useState，它应该返回状态（初始、加载、错误和成功）和结果，然后仅当第一个效果的状态正确时才调用第二个效果。

就像可以多次使用状态挂钩一样，也可以使用多个效果。这使我们能够将不相关的逻辑划分为不同的效果：

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

Hooks允许我们根据代码所做的事情而不是生命周期方法名称来拆分代码。React将按照指定的顺序应用组件使用的每个效果

---

反应文档-效果挂钩

1。您需要在redux级别进行所有数据转换（例如内部操作）。2.您可以在单个useEffect钩子上调用任意多的请求，但这取决于是否需要在某个状态更改时加载一次或每次数据。3.如果你想一个接一个地调用请求，你需要使用async/await或使用callback hell with Promissions。我建议你将所有请求和转换合并到一个redux操作中，然后只调用组件useEffect钩子中的一个操作。@demkovych To Op似乎没有使用Redux。如果它们是完全独立的api调用，应该同时运行，我肯定会使用两个独立的

useEffect

-调用，因为它们可能依赖于不同的值。如果第二个api调用依赖于第一个调用中返回的值，请使用单个

useffect

并在第一个承诺的

中调用第二个api。然后（）

（或使用async/await）。@fjurr是的，您将需要两个加载状态（或为每个数据使用默认值，如null）。在React 17中，我们可能会得到数据获取的

悬念
，这将很好地解决这个问题。但现在，你需要自己去做。