Question

我是 React/Typescript 的新手，我正在尝试在呈现一些订单之前创建一个加载页面我有以下主类 OrderUi：

const OrderUi = () => {
   const [loading, setLoading] = React.useState(false as boolean);
   return (
      <table>
       {loading ?
         orders.map((order: Order, key: number) => (
         <OrderOverview key={key} order={order} setLoading={setLoading}/>
         )) : <LoadingPage />}
      </table>
   );
export {OrderUi};

这是我的订单概览

interface OrderOverviewProps {
setLoading: (loading: boolean) => void;
}

export const OrderOverview = (props: { order: Order } & OrderOverviewProps) => {
    props.setLoading(true);
    return (
      <tr key={props.order.orderNumber}>
            <td>
                <span>{props.order.timestamp.toString().substring(0, 10)}<br/>
                    {props.order.timestamp.toString().substring(11, 16)}</span>
            </td>
            <td>
                <div>
                    <p><span>{props.order.orderNumber}</span></p>
                    <a className="detailsLink keyNav-element">Details</a>
                </div>
            </td>
     </tr>
   );};

这是加载页面

const LoadingPage = () =>
(
    <div>
        <p>Loading</p>
    </div>
);

export {LoadingPage};

我不知道我的逻辑是否正确，我仍然收到loading=false，希望你能给我一些我该怎么做的建议

Answer 1

您可以使用 useEffect 钩子：

const OrderUi = () => {
    const [loading, setLoading] = React.useState(true as boolean);
    const [orders, setOrders] = React.useState([] as Order[]);

    React.useEffect(() => {
        if (orders.lenght > 0) {
            setLoading(false);
        }
    }, [orders]);
    return (
        <table>
            {!loading ?
                orders.map((order: Order, key: number) => (
                    <OrderOverview key={key} order={order} />
                )) : <LoadingPage />}
        </table>
    );
}
export { OrderUi };

使用道具更改打字稿中的状态

1 个答案: