传递数据以填充子组件时，映射不是函数

Question

下面我有一个父反应组件，其中包括一个子组件，我将通过迭代响应数据来填充子组件的数量。

在我尝试映射时的渲染中，它显示 ma​​p 不是函数。

export default class Products extends Component {
  state = {
    allComics: []
  };

 
  render() {
    return (
      <section className=" py-4 py-lg-6">
        <div className="site-content" id="content">
          <div className="container">
            <div className="row">
              <div id="primary" className="content-area order-2">
                <div className="shop-control-bar d-lg-flex justify-content-between ">
                  <h5>Showing 1–12 of 126 results</h5>
                  <ul
                    class="nav justify-content-md-center nav-gray-700 mb-5 flex-nowrap flex-lg-wrap overflow-auto overflow-lg-visible"
                    role="tablist"
                  >
                    <li class="nav-item mx-2 mb-1 flex-shrink-0 flex-lg-shrink-1">
                      <div style={{ minWidth: 280 }}>
                        <Select options={category} defaultValue={category[0]} />
                      </div>
                    </li>
                    <li class="nav-item mx-2 mb-1 flex-shrink-0 flex-lg-shrink-1">
                      <div style={{ minWidth: 280 }}>
                        <Select options={universe} defaultValue={universe[0]} />
                      </div>
                    </li>
                  </ul>
                </div>

                <div className="tab-content" id="pills-tabContent">
                  <div
                    className="tab-pane fade show active"
                    id="pills-one-example1"
                    role="tabpanel"
                    aria-labelledby="pills-one-example1-tab"
                  >
                    <ul className="products list-unstyled row no-gutters row-cols-2 row-cols-lg-3 row-cols-xl-5 border-top border-left mb-6">
                      {
                      this.state.allComics.map((comic) => (
                        <div key={comic.id}>
                          <AllProductsProduct
                            key={comic.id}
                            data={comic}
                            onNavigate={() => this.navigateToComic(comic.id)}
                          />
                        </div>
                      ))}
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  async componentDidMount() {
    let {comicData} = await axios.get("http://localhost:5000/allcomics");
    console.log(comicData);
    let state = "";
    if (comicData) {
      state = comicData.map((comic) => {
        return {
          id: comic._id,
          seriesname: comic.seriesname,
          issuenumber: comic.issuenumber,
          description: comic.name,
          imageref: comic.imageref,
        };
      });
    }
    console.log(state);
    console.log(this.state.allComics);
    this.setState({ allComics: state });
  }

  async navigateToComic(comicId) {}
}

我在这里得到的响应是这样的

[
    {
        "_id": "5f5468fbc0c3f82c586b14d8",
        "seriesname": "Dr Doom",
        "issuenumber": 1,
        "description": "THE CRACK OF DOOM!",
        "imageref": "https://res.cloudinary.com/sdjsandssadsadsa/dsadsa",
        "publishdate": "2020-09-06T04:43:39.566Z"
    },
    {
        "_id": "5f5497151cc5391a9ce88420",
        "seriesname": "Dr Doom",
        "issuenumber": 2,
        "description": "THE CRACK OF DOOM!",
        "imageref": "https://res.cloudinary.com/sdjsandssadsadsa/dsadsa",
        "publishdate": "2020-09-06T08:00:21.384Z"
    },
    {
        "_id": "5f54972d1cc5391a9ce88421",
        "seriesname": "Dr Doom",
        "issuenumber": 3,
        "description": "THE CRACK OF DOOM!",
        "imageref": "https://res.cloudinary.com/sdjsandssadsadsa/dsadsa",
        "publishdate": "2020-09-06T08:00:45.452Z"
    }
]

Answer 1

在componentDidMount 中，您正在使用字符串初始化state：

let state = "";

如果comicData 是假的，你最终会用字符串而不是数组来设置你的状态，并且字符串没有map 方法。要解决此问题，请改为使用数组初始化 state：

let state = [];

或者，由于您的组件状态已经初始化，请将 setState 调用移到条件中，以便仅在有数据时设置它：

async componentDidMount() {
  let {comicData} = await axios.get("http://localhost:5000/allcomics");

  if (comicData) {
    let state = comicData.map((comic) => {
      return {
        ...
      };
    });

    this.setState({ allComics: state });
  }
}