React Redux Error在获取数据之前显示页面

Question

我有一个问题。我想在加载DOM之前得到一些数据，但我已经运行了几个小时的错误。我对我的查询有200个响应，但错误仍然存在。重新加载页面后，显示正常。

// redux
const dispatch = useDispatch();
const customers = useSelector((state) => state.customerReducer);
useEffect( () => {
dispatch(findAllCustomers());
}, [])
{ !isEmpty(Object.values(customers))  && Object.values(customers)[0].map((customer, index) => ...

Uncaught TypeError: Object.values(…)[0]。Map不是函数…

谢谢你的帮助。

[Array(54)]
0: (54) [{…}, {…}, {…}, {…},

0: Array(54)
0: {id: 2,, …}
1: {id: 3,  …}
2: {id: 4 , …}
//Actions.js
export const findAllCustomers = () => {
return (dispatch) => {
axios.get('/api/customers')
.then((response) => {
dispatch({
type: FIND_ALL_CUSTOMERS, payload:response.data
})
})
.catch((error) => console.log(error.response))
}
}

//CustomersReducer.js
const INITIAL_STATE = [];
function customerReducer(state = INITIAL_STATE, action)
{
switch (action.type){
case 'FIND_NB_CUSTOMERS' : {
return {
...state,
nbCustomers : action.payload
}
}
case 'FIND_ALL_CUSTOMERS' : {
return {
...state,
customers: action.payload
}
}
default:
return state
}
}
export default customerReducer;
//isEmpty()
export const isEmpty = (value) => {
console.log(value)
return (
value === undefined ||
value === null ||
(typeof value === "object" && Object.keys(value).length === 
0) ||
(typeof value === "string" && value.trim().length === 0)
);
}

Answer 1

Object.values(customers)返回一个数组，您正在尝试访问该数组的第一个索引，该数组可能不再是数组。

更改为:

Object.values(customers).map()

Answer 2

问题是，你正试图使用map()上的东西不是一个数组。Object.values(customers)[0]是一个对象。然而，由于customers是一个数组，根本没有理由使用Object.values()。相反，只需直接使用customers.map()映射数组。

所以它们应该是

{ customers && customers.map(...) }