找不到随机触发的react redux上下文值错误

以下是我在JSON中显示Redux存储状态内容的代码：

function ShowCartContents() {
// Convert object to JSON before rendering
const cartContentsJSON = JSON.stringify(useStore().getState())

return (
<div>
<h2>Cart contents: {cartContentsJSON}</h2>
</div>
);
}
// Works fine

一切都很好，但当我试图添加带有onClick属性的按钮来调用另一个函数时，我遇到了错误：

Error: could not find react-redux context value; please ensure the component is wrapped in a <Provider>

奇怪的是，我确实将<App>封装在<Provider>中，但出现了这个错误，我找不到发生这种情况的任何逻辑。这是我的App.js:的开始

import './App.css';
import MenuItems from './components/Navbar/MenuItems';
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { createStore } from 'redux';
import {AddItemToCart, DeleteItemFromCart, Counter} from './cart.js';
import Header from './header';
import Footer from './footer.js';
import { render } from "react-dom";
import { Provider } from "react-redux";
import { useSelector, useStore } from 'react-redux';

let store = createStore(Counter);
const rootElement = document.getElementById("root");
render(
<Provider store={store}>
<App />
</Provider>,
rootElement
);
const [customerInfo, setCustomerInfo] = useState([])

以下是我如何尝试使用OnClick为函数调用添加按钮：

function ShowCartContents() {
const cartContentsJSON = JSON.stringify(useStore().getState())

return (
<div>
<h2>Cart contents: {cartContentsJSON}</h2>
<button onClick={(e)=> {ShowCustomerInfo(e)}}>Proceed</button>
// Also tried: <button onClick={<ShowCustomerInfo/>}>Proceed</button>
</div>
);
}

这会触发上面的错误。这是我的ShowCustomerInfo函数：

function ShowCustomerInfo(){
fetch(`http://127.0.0.1:5000/getCustomerInfo`)
.then(response => response.json())
.then(response => {
setCustomerInfo(response.result);
console.log(response.result);
});
return (
<div>
<h2>
{customerInfo}
</h2>
</div>
);
}

是什么导致了异常？如有任何建议，我们将不胜感激。

export const App = () => {
const [customerInfo, setCustomerInfo] = useState([]);
// use this state so that we can disable hide the "Proceed"
// button immediately, before the fetch has completed
const [isLoading, setIsLoading] = useState(false);
const state = useSelector((state) => state);
const cartContentsJSON = JSON.stringify(state);
function loadCustomerInfo() {
console.log("clicked");
// can use async/await, but fetch is fine too
setIsLoading(true);
fetch(`http://127.0.0.1:5000/getCustomerInfo`)
.then((response) => response.json())
.then((response) => {
setIsLoading(false);
// could store this in redux instead
setCustomerInfo(response.result);
})
.catch((error) => {
console.error(error);
setIsLoading(false);
});
}
return (
<div>
<h2>Cart contents: {cartContentsJSON}</h2>
<button disabled={isLoading} onClick={() => loadCustomerInfo()}>
Proceed
</button>
{customerInfo.length > 0 && (
<div>
<h3>Customer Info</h3>
<p>{JSON.stringify(customerInfo)}</p>
</div>
)}
</div>
);
};