[英]Error while using React Context API: "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))
我已經嘗試了一些解決方案,特別是在這個鏈接上......
我嘗試在我的 TodosContext.js 文件中更改值.. 這也不起作用.. 我嘗試的另一件事是從另一個組件調用 useContext() function,這也不起作用..
這是我的代碼。 應用程序.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
我真的在為此苦苦掙扎,我花了一整天時間弄清楚出了什么問題..謝謝!
我們在評論中修復了它。
createContext
需要一個 object 作為定義上下文的參數。 在您的情況下,它應該是export const TodosContext = createContext([[],() => {}])
。 所以應用程序知道元組的第一個元素是一個數組,因此是可迭代的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.