javascript - 儿童道具未更新(Child props not getting updated)

Question

The following is my parent component:

(以下是我的父组件：)

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);

Part of it's reducer:

(减速器的一部分：)

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;
         }
       };

Part of its action:

(其部分行动：)

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;
     });
};

The issue here is pending flag is false initially, and during the getData call it turns to true, and after it's a success it turns to false again.

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

In Parent Modal, the pending prop updates to false once its a success.

(在父模式中，待处理的道具成功执行后将更新为false。)

But in BaseModal, this update is not getting reflected.

(但是在BaseModal中，此更新未得到反映。)

Can some one guide me where I am going wrong ?

(有人可以指导我哪里出问题了吗？)

  ask by starkmansion translate from so

Answer 1

There seems to be a problem with this code:

(这段代码似乎有问题：)

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

The loader prop should be loader={loader} .

(loader属性应为loader={loader} 。)

By default if you don't pass any value to any prop and just mention the prop name, React treats it true always.

(默认情况下，如果您没有将任何值传递给任何道具，而仅提及道具名称，React始终将其视为true。)

That's why the change is not being reflected in your BaseModal component.

(这就是为什么更改未反映在您的BaseModal组件中的原因。)