未捕获（承诺）TypeError：items.map 不是 function

Question

获取 fetch function 并将其设置为 state 值

我正在实现一个呈现 state 值的组件。

export default class HotelComponent {
  
    constructor() {
      this.state = {
        items: []
      }
      this.getHotelInfo();
    }

  async getHotelInfo(){

    await fetch('http://localhost:4000/hotel', {method: 'GET'})
    .then((response) => response.text())
    .then((data) =>{
        this.state.items = data
    })
    this.render();
  }

  render () {
    const { items } = this.state;
    console.log(items)
    return `
      <form id="form">
        <p>nation</p><input type="text" name="nation">
        <p>hotelNmae</p><input type="text" name="hotelName">
        <p>address</p><input type="text" name="address">
        <p>tel</p><input type="text" name="tel">
        <p>roomType<p><input type="text" name="roomType">
        <input type="file" name="file">
        <input type="submit">
      </form>
      <ul>
        ${items.map((item, key) => ` 
          <li>${item.nation}</li>
          <li>${item.hotelName}</li>
          <li>${item.address}</li>
          <li>${item.tel}</li>
          <li>${item.roomType}</li>
            <button class="deleteBtn" data-index="${key}">delete</button>
          </li>
        `).join('')}
      </ul>
      <button class="addBtn">add</button>
      `
  }


  setEvent () {
    this.$target.querySelector('.addBtn').addEventListener('click', () => {
      const { items } = this.$state;
      this.setState({ items: [ ...items, `item${items.length + 1}` ] });
    });

    // delete button event
    
    this.$target.querySelectorAll('.deleteBtn').forEach(deleteBtn =>
      deleteBtn.addEventListener('click', ({ target }) => {
        const items = [ ...this.$state.items ];
        items.splice(target.dataset.index, 1);
        this.setState({ items });
      }))

    // to register hotel info

      this.$target.querySelector('form').addEventListener('submit', (e) => {
        e.preventDefault();
    
        const payload = new FormData(form);
    
        fetch('http://localhost:4000/hotel', {
          method: 'POST',
          body: payload,
        })
        .then(res => res.json())
        .then(data => console.log(data));
      });

      
          
    }

}

查询数据就好了。

然而，

未捕获（承诺）TypeError：items.map 不是 function

我收到与下面相同的错误。

我该如何解决？

这是服务器文件内容。

<索引.js>

const Hotel = require('./hotel')

...

app.get("/hotel", (req, res)=>{

    Hotel.find(function(err, hotel){
        if(err) return res.status(500).send({error : 'database failure'});
        res.json(hotel);
    })
  })

<酒店.js>

const mongoose = require('mongoose')
const hotelSchema = new mongoose.Schema({
    nation : {type : String},
    hotelName : {type : String},
    address : {type : String},
    tel : {type : String},
    roomType : {type : String},
    originalFileName : {type : String},
    path: {type : String}
});

module.exports = mongoose.model('HotelSchema', hotelSchema)

Answer 1

我同意@Andy，你的变量items看起来像一个字符串而不是数组。

尝试将response.text()更改为response.json()看看它是否适合您。