我有一个正在进行的React项目。在我的 Jmeter 板我有一个订单文件夹。在这个里面我有一个命令表和一些模态。在order表中有一个下拉列表，当我们点击下拉列表中的列表项时，我们的模态组件被呈现。这是我的orders.js文件的代码
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { AssignRider } from './assign-rider';
import { OrderStatusChange } from './change-order-status/order-status';
export const Orders = ({
filters,
isLoading,
orders,
}) => (
<Styled>
<h2>ORDERS</h2>
<div className='content-holder'>
<OrderTable />
{
orders && orders.orders.length
? (
<Fragment>
<OrderDetail
selectedOrder={ orders.orders.find(({ number }) => number === selectedOrder) }
/>
<AssignRider />
<OrderStatusChange />
{
isBypassDeliveryGeoFencingModalOpen && <ConfirmModal
isLoading={ isLoading }
show={ isBypassDeliveryGeoFencingModalOpen }
handleClose={ toggleOrderBypassDeliveryGeoFencing }
handleConfirm={ () => bypassDeliveryGeoFencingAttempt(({
id: orders.orders.find(({ number }) => number === selectedOrder).id,
})) }
title='BYPASS DELIVERY GEO FENCING'
/>
}
</Fragment>
)
: ''
}
</div>
</Styled>
);
Orders.propTypes = {
toggleAssignedSwift: PropTypes.func.isRequired,
assignedSwiftAttempt: PropTypes.func.isRequired,
};order-table.js的代码如下
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import Image from '../../../ui/image/iconImage';
import {
Styled,
SortIcon,
List,
ListItem,
OrderImageWrap,
} from './styled';
import {
ORDER_ACTIONS,
RESOLUTION_FILTERS,
} from '../../../../utils/values';
import { DropdownAction } from './dropdown-action';
import { PopperDropdown } from '../../../ui/popper-dropdown';
// eslint-disable-next-line react/prop-types
const CategoryComp = ({data} )=> {
// eslint-disable-next-line react/prop-types
const {category, statusReason = '', deliveryTime } = data;
if (category === 'gift' ) {return <><p>{ statusReason } </p> <p> { deliveryTime }</p></>;}
return <p>{ statusReason }</p>;
};
export const OrderTable = ({
toggleOrderBypassGeoFencing,
toggleForceDeliverModalVisibility,
toggleStatusChangeModal,
toggleUnassignedRider,
toggleByPassReasonModalVisibility,
toggleAssignedSwift,
}) => {
useEffect(()=>{
fetchByPassReason();
}, [fetchByPassReason]);
useEffect(
() => {
fetchOrders(filters);
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[fetchOrders, filters, isRefresh],
);
useEffect(
() => () => resetOrdersTableFilters(),
[resetOrdersTableFilters],
);
return (
<Styled>
<Legend legends={ [{ status: 'Late at delivery' }, { status: 'Late at pickup' }] } />
{
tableData.length ?
<table>
<tbody>
{
tableData.map((item, index) => (
<tr
className={ selectedOrder === item.number.value ? 'selected' : '' }
key={ index }
onClick={ () => setSelectedOrder(item.number.value) }
>
{
columns.map(({ columnName, key }) => (
<td
key={ `${key}-${columnName}-${index}` }
className={
(key === 'rider' && item[key].orderStatus === ORDER_ACTIONS.ASSIGN_RIDER)
? 'action'
: key === 'number' && DELAY_REASON_COLORS[item.status.split(',')[1]]
}
>
{
key === 'status' ?
<Status
className='status'
status={ item[key].split(',')[0] }
/>
: key === 'bypass' ?
<DropdownAction
options={ item[key] }
toggleByPassReasonModalVisibility={ toggleByPassReasonModalVisibility }
toggleOrderBypassGeoFencing={ toggleOrderBypassGeoFencing }
/>
: key === 'statusReason' ?
<CategoryComp data={ item[key] } />
: key === 'number' ?
<OrderImageWrap>
<Image
src={ selectVerticalIcons[item[key].category] }
alt=''
/>
<div>
{ item[key].value }
</div>
</OrderImageWrap>
: key === 'riderDetail' ?
<div className='tooltipWrap tooltip-ex'>
<span className='riderName'>{ item[key].name ? item[key].name : '' }
</span>
{ item[key].name &&
(
<span
className='tooltip-ex-text tooltip-ex-right'
>{ item[key] ? item[key].name : '-' }
</span>)
}
</div>
: key === 'riderUnassign' ?
<i
className={ orders.orders.find(({ number }) =>
number === item.number.value).rider
&& isPermissible(loggedInUser.permissions, 'unassign_order')
? 'icon-user-minus'
: 'icon-user-minus disable'
}
title={ item[key].props.children }
// eslint-disable-next-line max-len
onClick={ orders.orders.find(({ number }) => number === item.number.value).rider
&& isPermissible(loggedInUser.permissions, 'unassign_order')
? item[key].props.onClick
: () => ({})
}
/>
: key === 'resolve' ?
<i
className={
item.status.split(',')[1] ===
RESOLUTION_FILTERS.LATE_AT_PICKUP || item.status.split(',')[1] ===
RESOLUTION_FILTERS.LATE_AT_DELIVERY
? 'icon-check-circle'
: 'icon-check-circle disable'
}
title={ item[key].props.children }
onClick={
item.status.split(',')[1] ===
RESOLUTION_FILTERS.LATE_AT_PICKUP || item.status.split(',')[1] ===
RESOLUTION_FILTERS.LATE_AT_DELIVERY
? item[key].props.onClick
: () => ({})
}
/>
: key === 'rider' ?
<PopperDropdown>
<List>
{ item[key].isAssigned && (
<ListItem
onClick={ item[key].isAssigned ? () =>
toggleAssignRiderModalVisibility() : () => { }
}
disable={ item[key].isAssigned ? false : true }
>
<i
className={ item[key].isAssigned
? 'icon-assign' : 'icon-assign disable' }
/>
<span>Assign Rider</span>
</ListItem>) }
<ListItem onClick={ () => {toggleStatusChangeModal();} }>
<i className='icon-order-status' />
<span> Order Status</span>
</ListItem>
</List>
</PopperDropdown>
: item[key]
}
</td>
))
}
</tr>
))
}
</tbody>
</table>
: !isOrdersLoading && <Text>
<div
style={ {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '40px 0',
width: '100%',
} }
>
<h3>No orders available</h3>
</div>
</Text>
}
{
totalRecord && !isOrdersLoading ?
<Pagination
filters={ filters }
onPageChanged={ selected => setOrdersTableFilters({
...filters,
page: selected + 1,
}) }
pageLimit={ pageSize }
totalRecords={ totalRecord }
/>
: isOrdersLoading &&
<Text className='center'>
Loading...
</Text>
}
</Styled>
);
};
OrderTable.propTypes = {
toggleOrderBypassGeoFencing: PropTypes.func.isRequired,
toggleForceDeliverModalVisibility: PropTypes.func.isRequired,
toggleAssignRiderModalVisibility: PropTypes.func.isRequired,
toggleStatusChangeModal: PropTypes.func.isRequired,
};在我的容器中，我将adn mapping和actions adn state分派给props，如下所示：
import { connect } from 'react-redux';
import { OrderTable } from './order-table';
import { actions as ordersActions } from '../../../../actions/orders';
import { actions as uiActions } from '../../../../actions/ui';
import {
selectOrderTableColumns,
selectPageSize,
selectVerticalIcons,
} from '../../../../selectors/orders';
import {
selectOrdersTableFilters,
} from '../../../../selectors/ui/orders';
import {selectUser} from '../../../../selectors/user';
const mapStateToProps = state => ({
selectedOrder: selectSelectedOrder(state),
tableData: selectTableDataFromState(state),
totalRecord: selectTotalRecords(state),
orders: selectOrders(state),
loggedInUser: selectUser(state),
selectVerticalIcons: selectVerticalIcons(state),
});
const mapDispatchToProps = {
setOrdersTableFilters: uiActions.ordersUi.setOrdersTableFilters,
toggleOrdersTableSort: uiActions.ordersUi.toggleOrdersTableSort,
toggleOrderBypassGeoFencing: uiActions.ordersUi.toggleOrderBypassGeoFencing,
toggleForceDeliverModalVisibility: uiActions.ordersUi.toggleForceDeliverModalVisibility,
toggleAssignRiderModalVisibility: uiActions.ordersUi.toggleAssignRiderModalVisibility,
toggleStatusChangeModal: uiActions.ordersUi.toggleStatusChangeModal,
};
export const OrderTableContainer = connect(mapStateToProps, mapDispatchToProps)(OrderTable);在上面的组件中，我列出了一个项目订单状态更改，并且我正在调度我的动作，该动作反过来改变了我在reducer中的redux状态。
现在在我的组件中，我正在获取我的状态和动作
import { connect } from 'react-redux';
import { OrderStatusChange } from './order-status';
import { actions as uiActions } from '../../../../actions/ui';
import { selectOrderStatus } from '../../../../selectors/ui/orders';
const mapStateToProps = state => ({
isModalOpen: selectOrderStatus(state),
});
const mapDispatchToProps = {
toggleStatusChangeModal: uiActions.ordersUi.toggleStatusChangeModal,
};
export const OrderStatusChangeContainer = connect(mapStateToProps, mapDispatchToProps)(OrderStatusChange);并利用它
import React, { useEffect } from 'react';
import PropTypes from 'prop-types';
import { ModalBox } from './styled';
import { Modal } from '../../../ui/modal';
export const OrderStatusChange = ({isModalOpen, toggleStatusChangeModal}) => {
console.log('isModalOpen', isModalOpen);
useEffect(() => {
console.log('this is rendering');
}, []);
return (
<ModalBox>
<Modal
show={ isModalOpen }
handleClose={ toggleStatusChangeModal }
>
hello
</Modal>
</ModalBox>
);
};
OrderStatusChange.propTypes = {
isModalOpen: PropTypes.bool.isRequired,
toggleStatusChangeModal: PropTypes.func.isRequired,
};但问题是这个组件没有被渲染，我在浏览器中没有看到任何控制台语句。这个流实际上是以这样一种方式工作的，当我单击列表项时，它会调度一个操作
export const toggleStatusChangeModal = () => {
return {
type: types.ORDER_STATUS_CHANGE_MODAL_VISIBILITY_TOGGLE,
};
};这个动作正在改变我的状态
const INITIAL_STATE = {
isOrderStatusChangeModalOpen: false,
}
case types.ORDER_STATUS_CHANGE_MODAL_VISIBILITY_TOGGLE:
return {
...state,
isOrderStatusChangeModalOpen: !state.isOrderStatusChangeModalOpen,
};而且状态也在改变，我已经调试过了。但问题是我的组件没有被渲染。谁能帮我解决这个问题。
1条答案
按热度按时间7nbnzgx91#
在
Orders组件中，似乎导入了未修饰的OrderStatusChange组件没有props传递给它，所以
isModalOpen和toggleStatusChangeModal是未定义的。事实上，这些似乎被声明为必需的props，所以我相信你应该看到一些关于缺少props的React PropTypes警告。我相信解决方案是导入并渲染装饰的，例如。Redux连接的
OrderStatusChangeContainer组件。此组件订阅了Redux，并将传递缺少的必需 prop 。