Javascript TypeError:this.state.followers.map不是函数

我正在构建一个简单的github用户卡生成器，它从github api获取用户数据及其追随者的数据，并将其显示在用户卡上。获取的追随者数据返回一个对象数组。为了将数据传递给followers组件，我在获取的数组上进行了映射，但在编译时，我得到了错误消息

TypeError:this.state.followers.map不是函数

。我用一个空字符串初始化了followers状态。请帮忙，可能是什么问题？代码如下：

import React from 'react';
import githublogo from './githublogo.svg'
import UserCard from './components/userCard.js';
import Followers from './components/follower.js';
import ErrorPage from './components/errorPage.js';
import Navbar from './components/navbar.js';
import './App.css';



class App extends React.Component {
  constructor(props) {
    super(props);

     this.state = {
       user: {},
       followers: [],
       input: '',
       submit: '',
       userExists: null,
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleExistence = this.handleExistence.bind(this);
   }

  componentDidMount() {
    fetch('https://api.github.com/users/{this.state.submit}')
    .then(response => response.json())
    .then(data => {
      console.log(data);
      this.setState({
         user: data
      });
   });

  fetch(`https://api.github.com/users/{this.state.submit}/followers`)
  .then(res => res.json())
  .then(data => {
    console.log(data);
    this.setState({
      followers: data
    });
  });
 }

 handleChange(e) {
   this.setState({
      input: e.target.value
   });
 }

 handleSubmit(e) {
    e.preventDefault();
    this.setState(state => ({
      submit: state.input
    }));
 }

 handleExistence() {
   if (this.state.submit === this.state.user.login) {
     this.setState({
        userExists: true
     });
   }
   else {
     this.setState({
       userExists: false
     });
   }
 }

 render() {

const renderFollowers = this.state.followers.map((follower) => <Followers 
      avatar= {follower.avatar_url} 
      username= {follower.login}
      id= {follower.id}
      githubLink= {follower.html_url}
      darkMode= {this.state.darkMode}
    />);

return (
  <div> 
    <Navbar /> 
    <div>
      <header>
        <img src={githublogo} alt="logo" />
        <h1>Welcome to Github UserCard Generator</h1>
        <form onSubmit={this.handleSubmit}>
          <input type="text" value={this.state.input} onChange={this.handleChange} placeholder="Github Username" />
          <button type="submit" onClick={this.handleExistence}>Generate User Card</button>
        </form>
      </header>
    </div>
    {this.state.userExists ? <div>
      <UserCard
        avatar={this.state.user.avatar_url}
        name={this.state.user.name}
        username={this.state.user.login}
        location={this.state.user.location}
        publicRepos={this.state.user.public_repos}
        following={this.state.user.following}
        followers={this.state.user.followers}
        githubLink={this.state.user.html_url} 
      />
      {renderFollowers} 
    </div> : <ErrorPage /> }
  </div>

  );

  }
}

从“React”导入React；
从“./githublogo.svg”导入githublogo
从“./components/UserCard.js”导入用户卡；
从“/components/follower.js”导入追随者；
从“./components/ErrorPage.js”导入ErrorPage；
从“./components/Navbar.js”导入导航栏；
导入“/App.css”；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
用户：{}，
追随者：[]，
输入：“”，
提交：“”，
userExists:null，
}
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
this.handleExistence=this.handleExistence.bind（this）；
}
componentDidMount（）{
取（'https://api.github.com/users/{this.state.submit}'）
.then（response=>response.json（））
。然后（数据=>{
控制台日志（数据）；
这是我的国家({
用户：数据
});
});
取回(`https://api.github.com/users/{this.state.submit}/followers`）
.then（res=>res.json（））
。然后（数据=>{
控制台日志（数据）；
这是我的国家({
追随者：数据
});
});
}
手变（e）{
这是我的国家({
输入：e.target.value
});
}
handleSubmit（e）{
e、 预防默认值（）；
this.setState（state=>({
提交：state.input
}));
}
handleExistence（）{
if（this.state.submit==this.state.user.login）{
这是我的国家({
userExists:true
});
}
否则{
这是我的国家({
userExists:false
});
}
}
render（）{
const renderFollowers=this.state.followers.map（（follower）=>）；
返回(
欢迎使用Github用户卡生成器
生成用户卡
{this.state.userExists？
{renderFollowers}
:  }
);
}
}

确保检查错误，即当用户名不存在时：

它应该像检查结果是否为数组一样简单：

fetch(`https://api.github.com/users/{this.state.submit}/followers`)
  .then(res => res.json())
  .then(data => {
    if (data instanceof Array)
        this.setState({
          followers: data
        });
  });

---

控制台日志（数据）显示什么？从API返回的数据似乎不是一个数组（可能是一个对象）。您确定您的输入是一个有效的github用户名吗？获取（

https://api.github.com/users/{this.state.submit}/followers

）如果提供了有效的github用户名，则将返回一个数组。如果未提供有效的github用户名，API将以对象的形式返回错误消息，在这种情况下，map函数将抛出该错误https://api.github.com/users/{this.state.submit}/followers是一个对象数组。非常奇怪，您初始化了this.state.followers=[]，因此它不应该抛出此错误。你能在调用

render

之前执行

console.log（this.state）

并将输出添加到你的帖子中吗？