如何通知子元素作业已完成？

Question

我有一个子元素，它显示从父元素传递的订单列表。我想在子级中放置一个“刷新”按钮，一旦按下该按钮，就会在父级内部调用一个函数来刷新订单。

单击刷新按钮时，其文本会通过使用本地状态挂钩转到“正在加载...”。问题是在新刷新的订单列表从父级到达后，我不确定如何将钩子的状态更改回“未加载”。

这是我的代码（也在 CodeSandbox：https://codesandbox.io/s/sad-wilbur-tbf7l?file=/src/App.js）：

import React from "react";
import "./styles.css";

const OrderDisplay = ({ orders, refreshOrders }) => {
  const [refreshing, setRefreshing] = React.useState(false);

  const handleRefreshBtn = () => {
    setRefreshing(true);
    refreshOrders();
  };

  return (
    <div>
      <button onClick={handleRefreshBtn}>
        {refreshing ? <span>loading...</span> : <span>Refresh Orders</span>}
      </button>

      {orders.map((item, index) => (
        <div key={index}>
          Name: {item.name} | Total: ${item.total}
          <hr />
        </div>
      ))}
    </div>
  );
};

export default function App() {
  const [orders, setOrders] = React.useState(null);
  const initialMount = React.useRef(true);

  const getOrders = () => {
    setTimeout(() => {
      setOrders([
        { name: "Order 1", total: Math.floor(Math.random() * 10) + 1 },
        { name: "Order 2", total: Math.floor(Math.random() * 10) + 1 }
      ]);
    }, 1000);
  };

  if (initialMount.current) {
    initialMount.current = false;
    getOrders();
  }

  return (
    <div className="App">
      <h1>Orders</h1>
      {orders ? (
        <OrderDisplay orders={orders} refreshOrders={getOrders} />
      ) : null}
    </div>
  );
}

点击“刷新订单”按钮后，您会注意到订单刷新成功，但按钮停留在“正在加载...”。我该如何解决？

Answer 1

一旦订单发生变化，您可以将setRefreshing 设置为 false，如下所示：

import React,{useEffect} from "react";
import "./styles.css";

const OrderDisplay = ({ orders, refreshOrders }) => {
  const [refreshing, setRefreshing] = React.useState(false);

  const handleRefreshBtn = () => {
    setRefreshing(true);
    refreshOrders();
  };
useEffect(()=>{
  if(orders.length)
  {
    setRefreshing(false)
  }

},[orders]);

  return (
    <div>
      <button onClick={handleRefreshBtn}>
        {refreshing ? <span>loading...</span> : <span>Refresh Orders</span>}
      </button>

      {orders.map((item, index) => (
        <div key={index}>
          Name: {item.name} | Total: ${item.total}
          <hr />
        </div>
      ))}
    </div>
  );
};

export default function App() {
  const [orders, setOrders] = React.useState(null);
  const initialMount = React.useRef(true);

  const getOrders = () => {
    setTimeout(() => {
      setOrders([
        { name: "Order 1", total: Math.floor(Math.random() * 10) + 1 },
        { name: "Order 2", total: Math.floor(Math.random() * 10) + 1 }
      ]);
    }, 1000);
  };

  if (initialMount.current) {
    initialMount.current = false;
    getOrders();
  }

  return (
    <div className="App">
      <h1>Orders</h1>
      {orders ? (
        <OrderDisplay orders={orders} refreshOrders={getOrders} />
      ) : null}
    </div>
  );
}

但是如果订单长度变为零，这将不起作用。在这种情况下，您可以删除 useEffect 中的 if 条件

Answer 2

你可以做这样的事情。在代码中读取 cmets

import React from "react";
import "./styles.css";

const OrderDisplay = ({ orders, refreshOrders }) => {
  const [refreshing, setRefreshing] = React.useState(false);

  const handleRefreshBtn = () => {
    setRefreshing(true);
    //
    //
    // Here you pass your setRefreshing
    // method to getOrders
    refreshOrders(setRefreshing);
  };

  return (
    <div>
      <button onClick={handleRefreshBtn}>
        {refreshing ? <span>loading...</span> : <span>Refresh Orders</span>}
      </button>

      {orders.map((item, index) => (
        <div key={index}>
          Name: {item.name} | Total: ${item.total}
          <hr />
        </div>
      ))}
    </div>
  );
};

export default function App() {
  const [orders, setOrders] = React.useState(null);
  const initialMount = React.useRef(true);

  //
  //
  // Here you defining it
  const getOrders = (setRefreshing) => {
    setTimeout(() => {
      setOrders([
        { name: "Order 1", total: Math.floor(Math.random() * 10) + 1 },
        { name: "Order 2", total: Math.floor(Math.random() * 10) + 1 }
      ]);
      //
      //
      // Here you use it
      setRefreshing(false);
    }, 1000);
  };

  if (initialMount.current) {
    initialMount.current = false;
    getOrders();
  }

  return (
    <div className="App">
      <h1>Orders</h1>
      {orders ? (
        <OrderDisplay orders={orders} refreshOrders={getOrders} />
      ) : null}
    </div>
  );
}

Answer 3

App 组件应该将是否刷新订单传递给OrderDisplay 一个。因为它持有那个状态。所以试试这个方法：

import React from 'react';
import './styles.css';

const OrderDisplay = ({ orders, refreshOrders, isRefreshing }) => {
    const handleRefreshBtn = () => {
        refreshOrders();
    };

    return (
        <div>
            <button onClick={handleRefreshBtn}>
                {isRefreshing ? (
                    <span>loading...</span>
                ) : (
                    <span>Refresh Orders</span>
                )}
            </button>

            {orders.map((item, index) => (
                <div key={index}>
                    Name: {item.name} | Total: ${item.total}
                    <hr />
                </div>
            ))}
        </div>
    );
};

export default function App() {
    const [orders, setOrders] = React.useState(null);
    const [refreshing, setRefreshing] = React.useState(false);

    // you do not need it see comment above React.useEffect
    // const initialMount = React.useRef(true);

    const getOrders = () => {
        setRefreshing(true)

        setTimeout(() => {
            setOrders([
                { name: 'Order 1', total: Math.floor(Math.random() * 10) + 1 },
                { name: 'Order 2', total: Math.floor(Math.random() * 10) + 1 },
            ]);

            setRefreshing(false);
        }, 1000);
    };
    // useEffect should be used instead of useRef if you need to fetch data
    // pass an empty array as a useEffect dependencies and it will ensures that
    // useEffect will be called only once after initial render
    React.useEffect(() => {
        getOrders();
    }, []);
    //   if (initialMount.current) {
    //     initialMount.current = false;
    //     getOrders();
    //   }

    return (
        <div className="App">
            <h1>Orders</h1>
            {orders ? (
                <OrderDisplay orders={orders} refreshOrders={getOrders} isRefreshing={refreshing} />
            ) : null}
        </div>
    );
}