Question

我正在开发一个 react.js 应用程序来搜索和显示 GitHub 用户。当我尝试显示用户时，我收到了上述消息。关于如何解决这个问题的任何提示？

import React, { useContext } from 'react';
import UserItem from './UserItem';
import Spinner from '../layout/Spinner';
import GithubContext from '../../context/github/githubContext';

const Users = () => {
  const githubContext = useContext(GithubContext);

  const { loading, users } = githubContext;

  if (loading) {
    return <Spinner />;
  } else {
    return (
      <div style={userStyle}>
        {users.map(user => (
          <UserItem key={user.id} user={user} />
        ))}
      </div>
    );
  }
};

const userStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(3, 1fr)',
  gridGap: '1rem'
};

export default Users;

Answer 1

在调用 map 函数时尚未创建数组 - 您可以使 map 函数以数组存在为条件，这样它就不会调用，除非它准备好了。

Answer 2

您可以为此使用可选链，在这种情况下您不会出错，并且当用户变成数组时，所有用户都将被呈现。例如

import React, { useContext } from 'react';
import UserItem from './UserItem';
import Spinner from '../layout/Spinner';
import GithubContext from '../../context/github/githubContext';

const Users = () => {
  const githubContext = useContext(GithubContext);

  const { loading, users } = githubContext;

  if (loading) {
    return <Spinner />;
  } else {
    return (
      <div style={userStyle}>
        {users?.map(user => (
          <UserItem key={user.id} user={user} />
        ))}
      </div>
    );
  }
};

const userStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(3, 1fr)',
  gridGap: '1rem'
};

export default Users;

获取此类型错误：无法读取未定义的属性“地图”

2 个答案: