如何修复:React-Context - TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)
Posted
技术标签:
【中文标题】如何修复:React-Context - TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator))【英文标题】:How to fix: React-Context - TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)) 【发布时间】:2020-12-02 11:38:39 【问题描述】:我已经尝试了一些解决方案,on this link 特别是...
我尝试在我的 TodosContext.js 文件中更改值..这也不起作用.. 我尝试过的另一件事是从另一个组件调用 useContext() 函数,这也不起作用..
这是我的代码。 App.js:
import React, useState, useContext from 'react';
import TodoList from './components/TodoList';
import NewTodo from './components/NewTodo';
import TodosProvider, TodosContext from './components/contextapi/TodosContext';
function App()
const [input, setInput] = useState('');
const [todos, setTodos] = useContext(TodosContext);
const _handleInput = (e) =>
setInput(e.target.value)
const _todoAdd = (e) =>
if (e.key === 'Enter')
setTodos(
[...todos, content: input, id: Date.now(), completed: false ]
)
setInput('')
const _todoRemove = (id) =>
const newTodos = todos.filter(todo => todo.id !== id)
setTodos(newTodos)
return (
<div>
<header>
<h3>To-Do Manager | Context API</h3>
</header>
<TodosProvider>
<NewTodo newTodo=_todoAdd handleInput=_handleInput newVal=input />
<TodoList todos=todos />
</TodosProvider>
</div>
);
export default App;
TodosContext.js:
import React, useState, createContext from 'react';
export const TodosContext = createContext()
export const TodosProvider = ( children ) =>
const [todos, setTodos] = useState([]);
return (
<TodosContext.Provider value=[todos, setTodos]>children</TodosContext.Provider>
)
TodoList.js:
import React, useContext from 'react';
import Todo from './Todo';
import RemoveTodoFromList from './RemoveTodoFromList';
import TodosContext from './contextapi/TodosContext'
function TodoList()
const [todos, setTodos] = useContext(TodosContext);
return (
<div>
todos.map(todo => (
<div>
<Todo key=todo.id todo=todo />
</div>
))
</div>
)
export default TodoList
我真的在为这个问题苦苦挣扎,我花了一整天的时间弄清楚出了什么问题。谢谢!
【问题讨论】:
你可以试试export const TodosContext = createContext([[],() => ])
。这会在创建时设置默认值。
@Stutje 是的,伙计!有用!我真的很感激,但是否有必要一直编写这种语法,还是只是在我的情况下?
您应该始终在 createContext
中提供默认值,或者至少指定它,这样您就不会遇到那些烦人的错误 :) 很高兴我能提供帮助
【参考方案1】:
我们在 cmets 中修复了它。
createContext
需要一个对象作为定义上下文的参数。
在您的情况下,它应该是export const TodosContext = createContext([[],() => ])
。
所以应用程序知道元组的第一个元素是一个数组,因此是可迭代的。
【讨论】:
以上是关于如何修复:React-Context - TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)的主要内容,如果未能解决你的问题,请参考以下文章
如何修复绑定元素'children'隐式具有'any' type.ts(7031)?
如何修复 'ctypes.ArgumentError: argument 2: <type 'exceptions.TypeError'>: wrong type' RaspberryPi
如何修复响应:type: "cors" 尝试通过 paypal api 创建付款时
如何修复 Android 中偏移 YYY 处的 Unmarshalling unknown type code XXX?
如何修复 grant_type 错误为 NULL - 使用 Pay Pal 的 REST API 访问令牌不受支持的授权类型