Reactjs 通过异步数据获取反应和重复使用

我有这个动作

export function fetchBranches() {
  return async dispatch => {
    const result = await axios.get('https://localhost:5002/Branches')
    dispatch({ type: FETCH_BRANCHES, payload: result.data.value })
  }
}

还有这样的减速器

export const branchReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_BRANCHES: {
      return { ...state, branches: action.payload }
    }
    default: return state
  }
}

在我的组件中，我正在尝试做这样的事情

const dispatch = useDispatch()
dispatch(fetchBranches())
const branches = useSelector(state => state.branches.branches)

return <>
  some component that uses branches
</>

---

调度通常不应直接在渲染中进行，而应在

useffect

或事件回调中进行。 就你而言

const dispatch=usedpatch（）
useffect（（）=>{
分派（fetchbranchs（））；
}, 
[快讯]
)
const branchs=useSelector（state=>state.branchs.branchs）

---

另外，请注意，你在这里写的是一种非常古老的redux风格——请阅读以了解我们正式推荐的“现代”redux风格。您将编写更少的代码。

通常不应直接在渲染中执行分派，而应在

useffect

或事件回调中执行分派。 就你而言

const dispatch=usedpatch（）
useffect（（）=>{
分派（fetchbranchs（））；
}, 
[快讯]
)
const branchs=useSelector（state=>state.branchs.branchs）

---

另外，请注意，你在这里写的是一种非常古老的redux风格——请阅读以了解我们正式推荐的“现代”redux风格。您将编写更少的代码。

您应该尝试将分派操作变为useEffect，这样代码只执行一次，如下所示：

const dispatch = useDispatch()

React.useEffect(() => {
dispatch(fetchBranches())
}, [])

---

文档。

您应该尝试将分派操作变为useEffect，这样代码将只执行一次，如下所示：

const dispatch = useDispatch()

React.useEffect(() => {
dispatch(fetchBranches())
}, [])

---

文档。

您的HTTP请求操作会在组件中产生副作用。每次状态更改都会导致重新渲染组件。为了避免副作用，您应该在组件中使用useEffect挂钩

在您的组件中

const dispatch=usedpatch（）
const onfetchbranchs=useCallback（（）=>dispatch（fetchbranchs（）），[dispatch]）；
const branchs=useSelector（state=>state.branchs.branchs）
useffect（（）=>{
onfetchbranchs（）；
}，[onfetchbranchs]）；
回来
一些使用分支的组件

您应该查看Reactjs文档，以便更好地理解useEffect钩子。

---

您的HTTP请求操作会在组件中产生副作用。每次状态更改都会导致重新渲染组件。为了避免副作用，您应该在组件中使用useEffect挂钩

在您的组件中

const dispatch=usedpatch（）
const onfetchbranchs=useCallback（（）=>dispatch（fetchbranchs（）），[dispatch]）；
const branchs=useSelector（state=>state.branchs.branchs）
useffect（（）=>{
onfetchbranchs（）；
}，[onfetchbranchs]）；
回来
一些使用分支的组件

您应该查看Reactjs文档，以便更好地理解useEffect钩子。

---

将
操作
分派到
使用效果
钩子解决您的问题

尝试：

dispatch
a
action
进入
useffect
hook解决您的问题

尝试：

也许你可以试试这个：

function BranchList() {
  const [isLoaded, setIsLoaded] = useState(false)
  const dispatch = useDispatch()

  useEffect(() => {
    if(!isLoaded) {
        dispatch(fetchBranches())
            .then(() => setIsLoaded(true))
    }
    
  }, [isLoaded])

  const branches = useSelector(state => state.branches.branches)
  const headerNames = ["Id", "Name"]

  if (!isLoaded) {
    return <>Loading...</>
  }
  
  return (
    <EditableTable
      data={branches}
      headerNames={headerNames}
      onEditConfirm={(row) => dispatch(updateBranch(row))}
      onDelete={(id) => dispatch(deleteBranch(id))} />
    )
  }

函数分支列表（）{
常量[isLoaded，setIsLoaded]=useState（false）
const dispatch=usedpatch（）
useffect（（）=>{
如果（！已加载）{
分派（fetchBranchs（））
.然后（（）=>setIsLoaded（true））
}
}，[已加载]）
const branchs=useSelector（state=>state.branchs.branchs）
警察头目=[“Id”，“姓名”]
如果（！已加载）{
返回加载。。。
}
返回(
调度（updateBranch（行））}
onDelete={（id）=>dispatch（deleteBranch（id））}/>
)
}
如果您尝试以下方法：

function BranchList() {
  const [isLoaded, setIsLoaded] = useState(false)
  const dispatch = useDispatch()

  useEffect(() => {
    if(!isLoaded) {
        dispatch(fetchBranches())
            .then(() => setIsLoaded(true))
    }
    
  }, [isLoaded])

  const branches = useSelector(state => state.branches.branches)
  const headerNames = ["Id", "Name"]

  if (!isLoaded) {
    return <>Loading...</>
  }
  
  return (
    <EditableTable
      data={branches}
      headerNames={headerNames}
      onEditConfirm={(row) => dispatch(updateBranch(row))}
      onDelete={(id) => dispatch(deleteBranch(id))} />
    )
  }

函数分支列表（）{
常量[isLoaded，setIsLoaded]=useState（false）
const dispatch=usedpatch（）
useffect（（）=>{
如果（！已加载）{
分派（fetchBranchs（））
.然后（（）=>setIsLoaded（true））
}
}，[已加载]）
const branchs=useSelector（state=>state.branchs.branchs）
警察头目=[“Id”，“姓名”]
如果（！已加载）{
返回加载。。。
}
返回(
调度（updateBranch（行））}
onDelete={（id）=>dispatch（deleteBranch（id））}/>
)
}
能否提供部件的完整样本？您是否考虑过useEffect挂钩？@ScottGnile更新的回答您能否提供组件的完整示例？“你考虑过Useffect钩子吗？”ScottGnile更新了答案非常感谢，我与它非常接近。我的代码有什么不同？由于
。然后（）
或者我错过了
useffect
的依赖关系，它的工作方式与我预期的一样。在依赖关系数组中为useffect使用isLoaded可能是最重要的更改。然后，在异步调度（fetchbranchs（））解决之前，保持setIsLoaded函数不被调用。非常感谢，我和它很接近。我的代码有什么不同？由于
.then（）
或者我错过了
useffect
的依赖关系，它的工作原理与我预期的一样。在依赖关系数组中为useffect使用isLoaded可能是最重要的更改。然后，在解决异步调度（fetchbranchs（））之前，阻止调用setIsLoaded函数。