State 在 axios 请求后未更新

Question

I previously had this code that made a get request via Axios to my local host to fetch data from an API.

export default function BasicTable() {
  const [orders, getOrders] = useState(null);
  useEffect(() => {
     fetchOrders();
  }, []);
  const fetchOrders = () => {
  axios.get("http://localhost:3000/orders").then((response) => {
      const res_orders = response.data.Items;
      console.log(res_orders);
      getOrders(res_orders);
  })
  .catch(error => console.error(`Error: ${error}`));

  }
  return (

      <div className="Table">
      <h3>Recent Orders</h3>  
        <TableContainer
          component={Paper}
          style={{ boxShadow: "0px 13px 20px 0px #80808029" }}
        >
          <Table sx={{ minWidth: 650 }} aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Product</TableCell>
                <TableCell align="left">Tracking ID</TableCell>
                <TableCell align="left">Date</TableCell>
                <TableCell align="left">Customer</TableCell>
                <TableCell align="left">Company</TableCell>
                <TableCell align="left">Status</TableCell>
                <TableCell align="left">Quantity</TableCell>
                <TableCell align="left"></TableCell>
              </TableRow>
            </TableHead>
            <TableBody style={{ color: "white" }}>
            {orders && orders.map(order => (
              Object.keys(order.sales).map(sale => 
                <TableRow
                key={order.id}
               // sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
              >
                <TableCell component="th" scope="row">
                  {order.sales[sale].name}
                </TableCell>
                <TableCell align="left">{order.sales[sale].trackingid}</TableCell>
                <TableCell align="left">{order.orderplaced}</TableCell>
                <TableCell align="left">{order.name}</TableCell>
                <TableCell align="left">{order.company}</TableCell>
                <TableCell align="left">
                  <span className="status" style={makeStyle(order.sales[sale].status)}>{order.sales[sale].status}</span>
                </TableCell>
                <TableCell align="left">{order.sales[sale].sales}</TableCell>
                <TableCell align="left" className="Details">Details</TableCell>
              </TableRow>
              )))} 
         
            </TableBody>
          </Table>
        </TableContainer>
      </div>
  );
}

I changed the URL to my ec2 instance that was running the backend API I created. However, after changing it back to the localhost URL that I have running on a different port in my machine, I noticed that my orders state is undefined. It seems to be able retrieve the orders on the get request as I am able to print it out, but for some reason it seems as though the state never updates and thus my component does not render.

console output

I've tried changing my fetch orders to an async function but still, the same result happened.

Answer 1

useEffect() is a side effect. Meaning react cycle checks it out after render. what your doing is passing null to your initial state, which is then interprated by the render as null initially.

1. change state to empty array instead of null, because you want to map it.

const [orders, getOrders] = useState([]);

2. add 'orders' state as a dependency to useEffect, so that react cycle keeps track of it and renders again when it changes.

useEffect(() => { fetchOrders(); }, [orders]);

3.in addition try to set conditional if orders is empty to render something different just in case

4. it's usually 'setOrders' not getOrders, but it's insignificant. You do you:-)

Answer 2

You should use this code instead of your code. Set orders as blank array in initial state and later set orders using the prevState syntax like as I did.

const [orders, getOrders] = useState([]);
  useEffect(() => {
     fetchOrders();
  }, []);
  const fetchOrders = () => {
  axios.get("http://localhost:3000/orders").then((response) => {
      const res_orders = response.data.Items;
      console.log(res_orders);
      getOrders(prevState => (res_orders));
  })
  .catch(error => console.error(`Error: ${error}`));

}

Answer 3

I think this good approach for API calls...

const fetchOrders =async () => {
     let response=await axios.get("http://localhost:3000/orders");
          getOrders(response.data.Items);
      }