![](/img/trans.png)
[英]How to fix: React-Context - TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
[英]Object is not iterable Error while Using React-Context
所以我最近開始使用 React 並且正在學習 Context Api。 我的代碼的熱情是:
export const UsersContext = createContext();
export function UsersProvider(props) {
const fetchedItem = async function () {
const data = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await data.json();
setUsers(users);
};
const [users, setUsers] = useState([]);
useEffect(function () {
fetchedItem();
}, []);
return (
<UsersContext.Provider value={[users, setUsers]}>{props.children}</UsersContext.Provider>
);
}
我嘗試像這樣導入和迭代用戶數組:
import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
const [users, setUsers] = useContext(UsersContext);
return (
<UsersProvider>
{users.map(function (user) {
//I do something with user object});}
</UsersProvider>
問題是這不起作用,我不確定在網上搜索它的術語是什么。 我得到TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))
這對我來說意味着users
不是數組? 但就我而言,它是。 任何修復/調試此問題的建議?
您在提供程序之外使用useContext
,您應該在子組件中使用useContext
。
import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
const [users, setUsers] = useContext(UsersContext);
return (
<UsersProvider>
{users.map(function (user) {
<div key={user.id}>{user.id}</div>
})}
</UsersProvider>
);
}
是相同的
import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
return (
<UsersContext.Consumer>
{([users, setUsers]) => (
<UsersProvider>
{users.map(function(user) {
<div key={user.id}>{user.id}</div>;
})}
</UsersProvider>
)}
</UsersContext.Consumer>
);
}
如您所見,消費者不是提供者的孩子,因此沒有提供任何內容。 在子組件中使用它是有效的。
import { UsersContext, UsersProvider } from './UsersContext';
export default function UsersPage() {
return (
<UsersProvider>
<UsersPageChild />
</UsersProvider>
);
}
function UsersPageChild() {
const [users, setUsers] = useContext(UsersContext);
return (
<div>
{users.map(function(user) {
<div key={user.id}>{user.id}</div>;
})}
</div>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.