如何修复: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([[],() =&gt; ])。这会在创建时设置默认值。 @Stutje 是的,伙计!有用!我真的很感激,但是否有必要一直编写这种语法,还是只是在我的情况下? 您应该始终在 createContext 中提供默认值,或者至少指定它,这样您就不会遇到那些烦人的错误 :) 很高兴我能提供帮助 【参考方案1】:

我们在 cmets 中修复了它。

createContext 需要一个对象作为定义上下文的参数。 在您的情况下,它应该是export const TodosContext = createContext([[],() =&gt; ])。 所以应用程序知道元组的第一个元素是一个数组,因此是可迭代的。

【讨论】:

以上是关于如何修复:React-Context - TypeError: Object is not iterable (cannot read property Symbol(Symbol.iterator)的主要内容,如果未能解决你的问题,请参考以下文章

使用 react-context 后出现黑屏问题

如何修复绑定元素'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 访问令牌不受支持的授权类型