谁能给我解释一下,我是怎么弄错的?如何在useEffect中使用redux-thunk async函数正确使用selector和useDispatch。
我输出的代码在屏幕上只返回 "用户列表 "的标题,而不是我所期望的用户列表。
代码是这样的。
import React, { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { fetchUsers } from '../redux'
function UserContainer() {
const userData = useSelector(state => state.user)
const dispatch = useDispatch()
useEffect(() => {
dispatch(fetchUsers())
},[dispatch])
return userData.loading ? ( <h2>Loading...</h2> ) :
userData.error ? (<h2>{userData.error}</h2>) :
<div>
<h2>User List</h2>
<div>
{ userData && userData.users && userData.users.map(user => <p>{user.name}</p>) }
</div>
</div>
}
export default UserContainer
这里是动作函数:
export const fetchUsers = () =>{
return function(dispatch) {
dispatch(fetchUsersRequest())
axios.get('https://jsonplaceholder.typicode.com/users')
.then(response => {
const users = response.data
dispatch(fetchUsersSuccess(users))
})
.catch(error => {
dispatch(fetchUsersFailure(error.message))
})
}
}
我发现了错误!这是一个疏忽。这是一个疏忽.在动作函数中,我.map()响应的地方,它是不需要的。
const users = response.data .map(user => user.id)
好吧 这段代码是一个关于如何使用redux-thunk的ajax调用正确使用Selector和useDispatch的完美例子。.