删除项目后，数据显示为空答案

【问题标题】：After deleting an item , data shows null删除项目后，数据显示为空
【发布时间】：2021-08-28 14:18:45
【问题描述】：

在我的行动中，我删除数据如下

    const deleteEmailFooter = (emailID) => async (dispatch) => {
      try {
        console.log('email id', emailID);
        const response = await api.delete(`/signatures/${emailID}`);
        return dispatch({
          type: "DELETE_EMAIL_FOOTER",
          payload: emailID,
        });
      } catch (error) {
        throw dispatch({
          type: "DELETE_EMAIL_FAILED",
          payload: error.data,
        });
      }
    };

这是我的减速器

const initialState = {
  emailFooters: [],
};
const videoFooterReducer = (state = initialState, action) => {
  switch (action.type) {
      case "GET_EMAIL_FOOTER":
      return action.payload ;
      case "DELETE_EMAIL_FOOTER":
      return state.emailFooters.filter((x) => x.id !== action.payload);

    default:
      return state;
  }
};

我正在像这样的组件之一中显示这些数据

......
       const signatures = useSelector((state) => state.videoFooterReducer.emailFooters);
       .......
       console.log("signatures...", signatures); // before deleting there is data , but after 
   deleting its shows in a console undefined 

      useEffect(() => {
        getEmailSignatures();
      }, []);
    
      const getEmailSignatures = async (signatures) => {
        try {
          dispatch(actions.videoFooterActions.getEmailFooter());
        } catch (error) {}
      };
      
      
     return(
        <div>
             {signatures.map((signature) => (
                <SignatureListTemplate signature={signature} key={signature.id} />
              ))}
        </div>
     );

为什么它为空，而仍然存在未删除的数据？错误：TypeError: Cannot read property 'map' of undefined

【问题讨论】：

标签： arrays reactjs redux react-redux react-hooks

【解决方案1】：

像这样更改你的 reducer 代码，看看它是否能解决问题

const initialState = {
  emailFooters: [],
};
const videoFooterReducer = (state = initialState, action) => {
  switch (action.type) {
      case "GET_EMAIL_FOOTER":
      return action.payload ;
      case "DELETE_EMAIL_FOOTER":
      const newEmails = [...state.emailFooters.filter((x) => x.id !== 
      action.payload]);
      return {
         ...state,
         emailFooters:newEmails
      }
    default:
      return state;
  }
};

问题是因为在您的代码中您返回了电子邮件页脚，它会将您在 reducer 中的状态更改为数组而不是对象 const inisialState = [your data] ，我认为这是不可接受的，即使这样更好，因为您可能有更多的状态

【讨论】：