Question

因此，我有一个用于加载仪表板组件的Route，以及一个具有与此仪表板组件不同链接的边栏，我试图使用useEffect在加载组件时从后端加载适当的数据

const Dashboard = ({match}) => {
  const dispatch = useDispatch()
  const [loading, setLoading] = useState(true)
  const thing = useSelector(state => state.things)[match.params.id]

  const fetchData = async () => {
    setLoading(true)
    await dispatch(loadStuff(match.params.id))
    setLoading(false)
  }

  useEffect(() => {
    fetchData()
  }, [match]);

  return loading
     ? <div>Loading</div>
     : <div>{thing.name}</div>

}

这对于第一次加载就足够好了。但是，当我单击侧栏上的NavLink更改{match}时，thing.name会爆炸。我希望，因为match是对useEffect的依赖，所以它将重新启动加载周期，并且一切都会暂停，直到加载完成为止，相反，它似乎试图立即呈现并且根本不进行API调用。如果删除thing.name，我会看到进行了api调用并且一切正常。

我一直在碰到这个问题，所以我似乎对安装组件时如何使用redux以可预测的方式加载数据有一个基本的误解。我在这里做什么错了？

Answer 1

您是否已使用react router dom的withRouter包装了您的组件？

import React, { useEffect } from 'react';
import { withRouter } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';

const Dashboard = ({ match }) => {
  const dispatch = useDispatch()
  const [loading, setLoading] = useState(true)
  const thing = useSelector(state => state.things)[match.params.id]

const fetchData = async () => {
  setLoading(true)
  await dispatch(loadStuff(match.params.id))
  setLoading(false)
}

useEffect(() => {
  fetchData()
}, [match.params.id]);

return loading
   ? <div>Loading</div>
   : <div>{thing.name}</div>
}

export default withRouter(Dashboard);

在match.params.id中使用useEffect，因为不应该比较对象（匹配）。

{} === {} /* will always be false and useEffect will be called every time 
             irrespective of match.params.id change. */

使用useEffect加载数据

1 个答案: