如何修复：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))如何修复：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 中提供默认值，或者至少指定它，这样您就不会遇到那些烦人的错误 :) 很高兴我能提供帮助

标签： javascript reactjs react-context

【解决方案1】：

我们在 cmets 中修复了它。

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

【讨论】：