我在一個電子商務網站上作業，我正在嘗試創建一個按鈕/處理程式，該按鈕/處理程式僅在當前日期小于或等于 deliveryAt 30 天時出現。我嘗試通過將我的處理程式放在 if/else 陳述句中來執行此操作，但我似乎沒有正確執行此操作，因為我收到警告說我錯過了我的addToDevolucionHandler. 我非常感謝有關如何正確執行此操作的任何幫助或指導。謝謝！
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { listOrderMine, detailsOrder } from '../actions/orderActions';
import LoadingBox from '../components/LoadingBox';
import MessageBox from '../components/MessageBox';
import {createReturn } from '../actions/returnActions';
//import {orderItems} from '../screens/OrderScreen';
import { RETURN_CREATE_RESET } from '../constants/returnConstants';
export default function OrderHistoryScreen(props) {
const order = useSelector((state) => state.order);
const returnCreate = useSelector((state) => state.returnCreate);
const {success, returned } = returnCreate;
const orderMineList = useSelector((state) => state.orderMineList);
const { loading, error, orders } = orderMineList;
console.log({orders});
const dispatch = useDispatch();
useEffect(() => {
dispatch(listOrderMine());
}, [dispatch]);
const created = new Date('createdAt');
const today = new Date();
const thirtyDays = 30 * 24 * 60 * 60 * 1000;
const timeDiff = today.getTime() - created.getTime();
if(timeDiff <= thirtyDays){
const addToDevolucionHandler = (orderId) => {
props.history.push(`/make-return/${orderId}`);
}
}
else{
console.log('Date is older than 30 days');
}
return (
<div>
<h1>Order History</h1>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox variant="danger">{error}</MessageBox>
) : (
<table className="table">
<thead>
<tr>
<th>ID</th>
<th>DELIVERED</th>
<th>ACTIONS</th>
</tr>
</thead>
<tbody>
{orders.map((order) => (
<tr key={order._id}>
<td>{order._id}</td>
<td>
{order.isDelivered
? order.deliveredAt.substring(0, 10)
: 'No'}
</td>
<td>
<button
onClick={()=>addToDevolucionHandler(order._id)}
className="primary block"
>
Make a Return
</button>
</td>
</tr>
))}
</tbody>
</table>
)}
</div>
);
}
uj5u.com熱心網友回復：
在您的代碼中，addToDevolucionHandler僅在if范圍內可見，在外部范圍內不可見return。
您可以通過在外層中創建函式來修改它，如下所示：
const addToDevolucionHandler = (orderId) => {
if(timeDiff <= thirtyDays){
props.history.push(`/make-return/${orderId}`);
}
else{
console.log('Date is older than 30 days');
}
}
這樣，函式總是在函陣列件的主體中創建，您在函式if內處理條件addToDevolucionHandler。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/437286.html
標籤：javascript 反应