javascript - 使用扩展运算符时如何处理未定义的 API 响应？

Question

我正在使用 React 和上下文:当我获取项目但没有数据时，我发送 null。 null 变为未定义(在 res.send 中)。在我的 reducer 中，我在添加新项目时使用传播运算符。这导致错误，因为我试图传播未定义的(当还没有项目并且后来添加了它的第一个未定义的)。

什么是好的做法？在这种情况下我应该怎么做才能将 undefined 更改为空数组？谢谢

const initialState = {
  isFetchingItems: null,
  items: [],
  fetchErrorMessage: null
}
const reducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_ITEMS':
      return {
        ...state,
        isFetching: true
      }
    case 'FETCH_ITEMS_SUCCESS':
      return {
        ...state,
        items: action.payload.messages,
        isFetching: false
      }
    case 'FETCH_ITEMS_ERROR':
      return {
        ...state,
        fetchErrorMessage: action.payload,
        isFetching: false
      }
    case 'ADD_ITEMS_SUCCESS':
      return {
        ...state,
        items: [action.payload, ...state.items] // here the err comes from as its like [action.payload, ...undefined]
      }
    default:
      return state;
  }
};

我的行动:

const fetchItems = async() => {
  dispatch({ type: 'FETCH_ITEMS' })
  try {
    let items = await API.fetchItems();
    dispatch({ type: 'FETCH_Items_SUCCESS', payload: items })
  } catch (error) {
    dispatch({ type: 'FETCH_ITEMS_ERROR', payload: error.message })
  }
};

const fetchItems = async() => {
  // ...
  dispatch({ type: 'ADD_ITEMS_SUCCESS', payload: items })
  // ...
}

Answer 1

您可以使用 nullish coalescing对于简单明了的回退行为:

[action.payload, ...(state.items ?? [])]

如果 state.items 为 null 或 undefined，将使用 [] 而不是 state.items.否则，它将使用 state.items。