React使用Context Provider/Consumer时orderHistory未定义错误排查

1. 核心错误：DataProvider未包裹目标组件 #

你调用React.createContext()时没有传入默认值，当<DataConsumer>没有被包裹在同个Context的<DataProvider>组件内部时，拿到的value会直接使用默认值也就是undefined，这是你当前报错的直接诱因。
你需要在OrderHistory的上层组件（通常是根组件App.js）中添加如下包裹逻辑：

import { DataProvider } from './contexts/DataProvider.js'
import OrderHistory from './OrderHistory.js'

function App() {
  return (
    <DataProvider>
      {/* 其他业务组件 */}
      <OrderHistory />
      {/* 其他业务组件 */}
    </DataProvider>
  )
}

2. 次要语法错误：OrderHistory组件JSX结构不匹配 #

OrderHistory.js中开头使用了React空片段<>，但代码中间出现了一个没有对应开启标签的</div>，结构不匹配会导致组件渲染异常，也可能间接影响上下文取值，需要删除多余的</div>或者补充对应的开启标签。

其他后续潜在问题（非当前报错直接原因） #

• 你在orderHistory的map回调中，return后面直接换行，受JS自动分号插入规则影响，代码会被解析为return;，后续的DOM结构不会被返回，需要把括号和return写在同一行。
• 你存入orderHistory的字段只有id和itemprice，但渲染时调用了不存在的item.deliverycharge，后续会出现取值为undefined的问题。

内容的提问来源于stack exchange，提问作者John Yepthomi