React中使用useContext包裹OrderProvider后出现空白页问题求助

问题描述 #

使用DRF和React开发电商网站时，尝试将订单数据通过Context传递给所有组件，但在index.js中用OrderProvider包裹组件后页面变为空白；不包裹则无法访问订单数据。

问题原因 #

核心问题出在OrderProvider组件的返回逻辑中：没有渲染传入的children属性。原代码里<OrderContext.Provider>标签内部是空的，导致被包裹的App组件完全没有被渲染，直接造成页面空白。

修复步骤 #

在OrderProvider的<OrderContext.Provider>标签内添加{children}，让Provider正确渲染它包裹的所有子组件。

修改后的关键代码 #

OrderProvider.js #

import React, { useEffect, useState, createContext } from "react";
import axios from "axios";
import { BASE_URL } from "../components/Cart";

const OrderContext = createContext("");
export default OrderContext;
  
export const OrderProvider = ({ children }) => {
  const [orderBook, setOrderBook] = useState([]);
  const [order, setOrder] = useState(""); 
  
  function getCookie(name) {
    let cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        const cookies = document.cookie.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
  }
  
  const csrftoken = getCookie('csrftoken');

  const GetOrder = async () => {
    try {
      const response = await axios.get(`${BASE_URL}`, {
        headers: { "X-CSRFToken": csrftoken }
      });
      setOrder(response.data[0]);
      console.log("response form ordercontext component : ", response.data[0]);
    } catch(error) {
      console.log(error);
    }
  };

  useEffect(() => {
    GetOrder();
    console.log("Order from Order Context");
  }, []);

  const context = { order };

  // 关键修复：添加{children}让Provider渲染子组件
  return (
    <OrderContext.Provider value={context}>
      {children}
    </OrderContext.Provider>
  );
};

验证效果 #

修改完成后，index.js中被OrderProvider包裹的App组件会正常渲染，同时BookDetails等子组件可以通过useContext(OrderContext)正确获取订单数据。点击BookDetails中的按钮，控制台会输出对应的订单信息。

内容的提问来源于stack exchange，提问作者Oula R.