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

Question

我正在使用反应和上下文：当我获取项目并且没有数据时，我发送 null。null 变为未定义（在 res.send 内）。在我的减速器中，当添加新项目时，我使用扩展运算符。这会导致错误，因为我试图传播未定义的内容（当还没有项目时，后来添加了第一个未定义的项目）。

什么是好的做法？在这种情况下我应该做什么来将 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 合并来实现简单而简洁的后备行为：

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

如果state.items是null或undefined,[]将使用 代替state.items。不然就要用state.items.