为什么我不能在全局上下文中返回数据数组?

Question

我无法读取未定义的属性(读取'map')错误。我只是试图访问数组data.js在我的Form.js组件和映射的属性。但它说数据是未定义的，当我console.log。我将数据设置为评论状态默认值。然后，我将状态变量reviews传递给值props，以便Form.js可以访问它。如有任何帮助，不胜感激。

context.js

import React, { useState, useContext, useEffect } from 'react';
import data from './data';
const AppContext = React.createContext();
const AppProvider = ({ children }) => {
const [reviews, setReviews] = useState(data);
const [isLoading, setIsLoading] = useState(true);
return <AppContext.Provider value={reviews}>{children}</AppContext.Provider>;
};
export const useGlobalContext = () => {
return useContext(AppContext);
};
export { AppContext, AppProvider };

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { AppProvider } from './context';
ReactDOM.render(
<AppProvider>
<App />
</AppProvider>,
document.getElementById('root')
);

App.js

import React, { useState } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './App.css';
import Home from './Home';
import Form from './Form';
const App = () => {
return (
<Router>
<Route exact path='/'>
<Home />
</Route>
<Route path='/form'>
<Form />
</Route>
</Router>
);
};
export default App;

Form.js

import React from 'react';
import { Link } from 'react-router-dom';
import { useGlobalContext } from './context';
const Form = () => {
const { reviews } = useGlobalContext();
console.log(reviews);
return (
<section>
{reviews.map((review) => {
return <h2>It is working!</h2>;
})}
</section>
);
};
export default Form;

data.js

const reviews = [
{
id: 1,
name: 'susan smith',
job: 'web developer',
image:
'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg',
text: "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry",
},
{
id: 2,
name: 'anna johnson',
job: 'web designer',
image:
'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg',
text: 'Helvetica artisan kinfolk thundercats lumbersexual blue bottle. Disrupt glossier gastropub deep v vice franzen hell of brooklyn twee enamel pin fashion axe.photo booth jean shorts artisan narwhal.',
},
{
id: 3,
name: 'peter jones',
job: 'intern',
image:
'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg',
text: 'Sriracha literally flexitarian irony, vape marfa unicorn. Glossier tattooed 8-bit, fixie waistcoat offal activated charcoal slow-carb marfa hell of pabst raclette post-ironic jianbing swag.',
},
{
id: 4,
name: 'bill anderson',
job: 'the boss',
image:
'https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883423/person-4_t9nxjt.jpg',
text: 'Edison bulb put a bird on it humblebrag, marfa pok pok heirloom fashion axe cray stumptown venmo actually seitan. VHS farm-to-table schlitz, edison bulb pop-up 3 wolf moon tote bag street art shabby chic. ',
},
];

Answer 1

try this

const AppContext = React.createContext(
/*here u should set default value as empty array or data object.*/
)

context的初始值是未定义的，所以你得到错误像这样的访问

const reviews = useGlobalContext()

Answer 2

你不应该解构你的上下文，你只是给它分配一个数组，所以它只是

const reviews = useGlobalContext()

另外，分配一些初始上下文值总是一个好主意，这样你就可以更精确地调试诸如此类的东西或进一步实现占位符等的一些逻辑。