Question

以下是我的父组件：

import { BaseModal } from "../base-modal";
import {
  closeParentModal,
  getData
} from "../../../redux/actions/parent-modal";
class ParentModal extends Component {
  constructor(props) {
    super(props);
  }


  componentDidMount() {
     const { isOpen, shelfId, Data } = this.props;
     if (isOpen) {
       Data(shelfId);
     }
  }
  render() {
    const { closeModal, shelfId, loader, ...props } = this.props;
    console.log("re render");
    return (
      <BaseModal
        {...props}
        className={"ParentModal-container"}
        closeModal={closeModal}
        loader
      >
      </BaseModal>
    );
  }
}


const mapDispatchToProps = dispatch => ({
  closeModal: () => {
    dispatch(closeParentModal());
  },
  Data: shelfId => {
    dispatch(getData(shelfId));
  }
});

const mapStateToProps = state => {
  const loader = getSafe(() => state.ParentModal.pending, false);
  console.log(loader);
  return {
    loader
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ParentModal);

部分是减速器：

export const parentModal = (state = initalState, action = {}) => {
         const { type } = action;
         switch (type) {
           case OPEN_PARENT_MODAL:
             return { ...state, active: true };
           case CLOSE_PARENT_MODAL:
             return { ...state, active: false };
           case FETCH_PENDING:
             return { ...state, pending: true };
           case FETCH_SUCCESS:
             return { ...state, pending: false, Data: action.Data };
           case FETCH_ERROR:
             return { ...state, pending: false, Error: action.error };
           default:
             return state;
         }
       };

其部分动作：

export const FetchSuccess = Data => {
  return {
    type: FETCH_SUCCESS,
    Data
  };
};


export const getData = shelfId => dispatch => {
  dispatch(FetchPending());
   const url = `xxxx`;
   const translate = resp => resp;
   fetchJSON(url, translate)
     .then(response => {
       if (response.status >= 400) {
         throw new Error("error");
       } else {
         dispatch(FetchSuccess(response.items.slice(0, 20)));
       }
     })
     .catch(error => {
       return error;
     });
};

这里的问题是挂起标志最初为false，在getData调用期间它变为true，成功后再次变为false。

在“父模式”中，待处理的道具成功执行后将更新为false。但是在BaseModal中，此更新未得到反映。有人可以指导我哪里出问题了吗？

Answer 1

此代码似乎有问题：

<BaseModal
   {...props}
   className={"ParentModal-container"}
   closeModal={closeModal}
   loader
>          
</BaseModal>

加载程序属性应为loader={loader}。默认情况下，如果您没有将任何值传递给任何道具，而仅提及道具名称，React始终将其视为true。这就是为什么更改未反映在您的BaseModal组件中的原因。

儿童道具未更新

1 个答案: