Question

使用 React-Context 或在 React 中时，对象不可迭代错误

2020-04-01

25257

javascript reactjs 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：对象不可迭代（无法读取属性 Symbol（Symbol.iterator）） ，这对我来说意味着 users 不是数组？但就我而言。有什么修复/调试此问题的建议吗？

Answer 1

您在提供程序之外使用了 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>
  );
}

Answer 2

当您以错误的方式解构时，React 中可能会出现此错误。

将 const [resId] = useParams(); 更改为 const {resId} = useParams();

注意：检查 resId 的括号。您可能正在使用其他一些 Hooks 或对象，但只需检查这些括号即可