Redux Dispatch无限循环

Question

我在useeffect中使用axios.get，然后将响应中的数据传递给调度程序。它检索数据并调度，然后获得状态以在控制台上显示数据，但数据显示无限循环。这是我的useEffect，本地状态，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调用移至动作创建者。我从上面获得的数据在控制台中循环播放。请帮助。

此外，如果我为此创建动作创建者，那也会循环。动作创建者如下：

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

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

Answer 1

注意，这里的useEffect是发生无限循环的地方：

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])

useEffect被告知users是它的依赖项之一，当此变量更改时，它应该重新运行。然后，useEffect通过users更改setUsers的值，并看到此更新，因此再次运行。

[看来您仅依靠users来获得此console.log。考虑将其从依赖项列表中删除。