Redux调度无限循环

我在useeffect中使用axios.get，然后将响应中的数据传递给调度程序。它检索数据并分派，然后我得到状态，在控制台上显示数据，但数据显示无限循环。这是我的useEffect、local state、mapStateToProps和mapDispatchToProps

const [users, setUsers] = useState()
useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      // console.log(response.data)
      __storeUsers(response.data)
    })
    setUsers(showUsers)
    console.log(users)
  }, [__storeUsers, showUsers, users, setUsers])

const mapStateToProps = state => ({
  showUsers: state.getUsers.users
})

const mapDispatchToProps = dispatch => ({
  __storeUsers: (data) => dispatch({type: types.STORE_USERS, payload: data}),
})

这是我为用户设计的减速机

import * as types from "./types";
const initialState = {
  users: []
}
const usersState = (state = initialState, action) => {
  switch (action.type) {
    case types.STORE_USERS:
      return {
        ...state,
        users: action.payload
      }
    default:
      return state
  }
}
export default usersState

这是为了练习。我现在没有使用actionCreators。在此之后，我将axios调用移动到动作创建者。我从上面得到的数据在控制台中循环。请帮忙

另外，如果我为此创建了action creator，这也会进入循环。Action creator如下所示：

export const UserActions = () => async (dispatch) => {
  const response = await axios.get('https://jsonplaceholder.typicode.com/users')
  if (response.data) {
    // console.log(response.data)
    dispatch({
      type: types.STORE_USERS,
      payload: response.data
    })
  } else {
    // console.log("no data")
  }
  return response
}

然后我像下面那样使用它

const mapDispatchToProps = dispatch => ({
  __storeUsers: () => dispatch(UserActions())
})

---

这两种方法都在控制台中触发循环。

请注意，

useffect

这里是无限循环发生的地方：

const [users, setUsers] = useState()
useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      // console.log(response.data)
      __storeUsers(response.data)
    })
    setUsers(showUsers)
    console.log(users)
  }, [__storeUsers, showUsers, users, setUsers])

useffect

已被告知，

users

是其依赖项之一，当此变量发生变化时，它应该重新运行。

useffect

然后通过

setUsers

更改

users

的值，它会看到此更新再次运行

---

您似乎只依赖

用户

来完成此

控制台.log

。考虑将它从依赖列表中取出。

注意，您的<代码>使用效果< /代码>：这里是无限循环发生的地方：

const [users, setUsers] = useState()
useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/users').then(response => {
      // console.log(response.data)
      __storeUsers(response.data)
    })
    setUsers(showUsers)
    console.log(users)
  }, [__storeUsers, showUsers, users, setUsers])

useffect

已被告知，

users

是其依赖项之一，当此变量发生变化时，它应该重新运行。

useffect

然后通过

setUsers

更改

users

的值，它会看到此更新再次运行

---

您似乎只依赖

用户

来完成此

控制台.log

。考虑将它从依赖列表中取出。

我从依赖列表中逐个删除了.x存储用户、显示用户、用户、设置用户，它仍然显示了这个循环。如果我完全删除拒绝列表[]，仍然显示循环。从依赖项列表中逐个设置用户，它仍然显示循环。如果我完全删除拒绝列表[]，仍然显示循环。