React Redux 错误页面在获取数据之前显示答案

【问题标题】：React Redux Error the page is displayed before getting the dataReact Redux 错误页面在获取数据之前显示
【发布时间】：2021-10-14 03:49:34
【问题描述】：

我有问题。我想在加载 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) => ...

未捕获的类型错误：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)
    );
 }

【问题讨论】：

你确定你的意思是Object.values(customers)[0] 而不是Object.values(customers) 没有[0]？这是一个数组还是数组？
为什么要映射索引[0]？
向我们展示存储在customers 中的数据。没有它，所有答案都是推测性的猜测。
谢谢...我刚刚用收到的数据更新了我的帖子
@zero298 真正的问题是当我点击指向客户页面的链接时，数据来不及到达页面已经建立，当我刷新页面时显示数据正确 – Cedric Flamain 22 分钟前删除

标签： reactjs dictionary redux react-router effect

【解决方案1】：

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

所以应该是这样的

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

【讨论】：

真正的问题是当我点击指向客户页面的链接时，数据来不及到达页面已经建立，当我刷新页面时数据显示正确
@CedricFlamain 这与您在此处发布的问题不同。我建议您提出一个新问题来获得有关该问题的帮助。
@CedricFlamain 当前的答案不能解决问题吗？他们应该解决直接错误，但似乎还有另一个潜在问题需要使用不会导致此错误的更新代码提出新问题。
我修改了最初的问题是由在接收数据之前加载的页面引起的问题。问题确实如此。此时可以删除。
@CedricFlamain 我不认为你可以删除这个问题，因为它有投票的答案。您应该只发布一个新问题。

【解决方案2】：

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

改为：

Object.values(customers).map()

【讨论】：

或者应该是customers.map()。如果不知道 customers 是什么，就很难说清楚。
我完全同意
@RyanLe 真正的问题是当我点击通往客户页面的链接时，数据来不及到达页面已经建立，当我刷新页面时显示数据正确 – Cedric Flamain 22 分钟前删除