未捕获（承诺中）类型错误：无法读取未定义的属性“forEach”

Question

我正在尝试从 OMDB 数据库中获取数据以显示电影。最初我已经实现了点击事件来调用数据并且没有发现错误。但是当我切换到 keyup 事件时，我得到了这个错误。

Uncaught (in promise) TypeError: Cannot read property 'forEach' of undefined 在 fetchMovie.getMovies.then.res (main.js:27) fetchMovie.getMovies.then.res@main.js:27 异步函数（异步） searchInput.addEventListener@main.js:19

   let searchInput = document.getElementById('search')

    class fetchData {
    constructor() {
        this.apiKey = 'here is APIKey'
    }

    async getMovies(movie) {
        const movieRes = await fetch(`http://www.omdbapi.com/?apikey=${this.apiKey}&s=${movie}`)
        const moveData = await movieRes.json()
        return {
            moveData
        }
    }
      }
    const fetchMovie = new fetchData

    searchInput.addEventListener('keyup', (e) => {
    let input = e.target.value

    if (input !== '') {
        fetchMovie.getMovies(input)
            .then(res => {
                let data = res.moveData.Search
                let output = ''
                data.forEach(movie => {
                    output += `
                    <div class="col-md-3">
                    <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="${movie.Poster}" alt="Card image cap">
                    <div class="card-body">
                      <h5 class="card-title">${movie.Title}</h5>
                      <p class="card-text">${movie.Year}</p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>
                    </div>`
                });
                document.getElementById('container').innerHTML = output;
            })
    }
    e.preventDefault();
    })

截图

用空图像修复的错误还添加了 keyup 事件。控制台没有错误

    let searchInput = document.getElementById('search');

class fetchData {

    constructor() {
        this.apiKey = '884df292'
    }

    async getMovies(movie) {
        const movieRes = await fetch(`http://www.omdbapi.com/?apikey=${this.apiKey}&s=${movie}`)
        const moveData = await movieRes.json()
        return {
            moveData
        }
    }
}
const fetchMovie = new fetchData

searchInput.addEventListener('keyup', (e) => {
    let input = e.target.value;

    if (input !== '') {
        fetchMovie.getMovies(input)
            .then(res => {
                let data = res.moveData.Search
                console.log(data)
                if (!data) {
                    return false
                } else {
                    let output = ''
                    data.forEach(movie => {
                        let poster
                        if (movie.Poster === "N/A") {
                            poster = `https://upload.wikimedia.org/wikipedia/commons/a/ac/No_image_available.svg`
                        } else {
                            poster = movie.Poster
                        }
                        output += `
                    <div class="col-md-3 movie-card">
                    <div class="card">
                    <img class="card-img-top" src="${poster}" alt="Card image cap">
                    <div class="card-body">
                      <h5 class="card-title">${movie.Title}</h5>
                      <p class="card-text">${movie.Year}</p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                  </div>
                    </div>`
                    });
                    document.getElementById('container').innerHTML = output;
                }
            })
            .catch(err => console.log(err))
    }
    e.preventDefault();
})

Answer 1

如果您看到您首先获得的日志屏幕截图并记录了undefined。这很可能是因为每次按键都会发生提取，如果您在 API 中搜索单个字符（这是您使用第一个 keyup 发送的内容），您将没有返回任何结果，因此forEach 失败。

在执行forEach 之前检查数据是否具有值，或者如果搜索字符串是单个字符，则甚至不发送获取。

let data = res.moveData.Search
let output = ''
if (!data) return; //early break if not results where returned.

或将if (input !== '') {改为

if (input.trim().length > 1) { // only do the fetch if more than one characters where entered

尽管即使您发送了多个字符，您仍可能得不到任何结果，因此第一种方法更安全。