items.map 不是 function 反应

Question

我在从 api 获取数据并将其显示在 web 页面上时遇到问题。 我收到此错误：“items.map 不是函数”。 我不确定这是此代码的问题，还是我在 api 中获取请求的代码，我将发布这两个代码以防万一。

我将在下面粘贴我的代码，但没有指向我的 api 的链接。 谢谢，

import React from "react";

class App extends React.Component {


  constructor(props) {

    super(props);

    this.state = {
        items: [],
        isLoaded: false
    }

}

componentDidMount() {

  fetch(" api link ")
      .then(res => res.json())
      .then(json => {
        this.setState({ isLoaded: true, items: json });
      }).catch((err) => {
          console.log(err);
      });

}


render() {

  const { isLoaded, items } = this.state;

  if (!isLoaded)
      return <div>Loading...</div>;

  return (
      <div className="App">
          <ul>
              {items.map(item => (
                  <li key={item.oid}>
                      Name: {item.rows.productName} | Condition: {item.rows.productCondition}
                  </li>
              ))}
          </ul>
      </div>
  );

}

}

export default App;

Api 代码：

async function getComments(req) {
   let status = 500, data = null;
   try {

         const sql = 'SELECT * FROM products';
         const rows = await db.query(sql);

         if (rows) {
            status = 200;
            data = {
                rows,

            };
         } else {
            status = 204;
         }
     
   } catch (e) {
      console.error(e);
   }
   return { status, data };
}


app.get('/demo/api_project', async (req, res) => {
   const { status, data } = await getComments(req);
   res.status(status);
   if (data) res.json(data);
   else res.end();
})

Answer 1

尝试 console.log() 您从 api 的响应，您可能会发现您的数组嵌套在响应 object 中。