Question

我正在React / Redux应用程序中获取订单的列表。用户在“搜索”组件中输入一个单词，订单列表应显示在“列表”组件下方。在我提交搜索词时，从console.log（orders）的“列表”组件内部，它返回一个空数组（默认状态为空数组）。它返回一个包含5个项目的数组。

[] 
orders: (5) [{…}, {…}, {…}, {…}, {…}]

但是，如果我console.log（orders.length）我得到'0'，但是一旦我提交搜索，它就返回未定义。为什么？不是数组吗？

[]
0
{orders: Array(5)}
undefined

列表组件：

export class List extends React.Component {
  render() {
    const { orders } = this.props;
    console.log(orders.orders);

    return <div>List Component</div>;
  }
}

const mapStateToProps = state => ({
  orders: state.orders.ordersArr
});

减速器：

  const initialState = {
     name: '',
     ordersArr: []
  };
  export default (state = initialState, action) => {
     switch (action.type) {
        case 'FETCH_ORDERS':
          return { ...state, ordersArr: action.payload };

减速器索引

export default combineReducers({
  orders: ordersReducer
});

操作：

export const fetchOrders = () => async dispatch => {
  const response = await work.get(`/needtoorders`);

  dispatch({ type: 'FETCH_ORDERS', payload: response.data });
};

Answer 1

似乎orders是一个对象，也包含一个称为orders的属性。该属性包含一个数组。

尝试以下方法：

console.log(orders.orders.length)

鉴于orders和orders.orders可能未定义，您也可以尝试此方法。

if (orders && orders.orders && orders.orders.length > 0) {
  console.log(orders.orders.length)
}

Answer 2

似乎initialState包含ordersArr不包含orders

Answer 3

你能试试吗

if (orders && orders.orders && orders.orders.length > 0) {
  console.log(orders.orders.length)
}

希望有帮助

无法在React中获取数组的长度

3 个答案: