反应传播不可迭代实例的无效尝试

Question

我不断收到此错误： TypeError：传播不可迭代实例的无效尝试 当我试图在这里获取一些数据时：

export const genres = () => {
  const apiUrl = "http://localhost:3000/api";

  return fetch(apiUrl + "/genres")
    .then(response => response.json())
    .then(data => {
      const res = Array.from(data.results);
      return res;
    });   
};
console.log(genres)

export function getGenres() {
  return genres().then(res => res.filter(g => g));
}

并在此处更新我的组件的状态：

componentDidMount() {
    const genres = [{ _id: "", name: "All Genres" }, ...getGenres()];
    this.setState({ genres});

  }

我知道问题来自于这样一个事实：genres returns 一个对象，而 state 应该是一个数组，但我不确定如何解决它。

谢谢

Answer 1

getGenres returns 一个承诺，所以你需要等待它解决，然后再尝试将它返回的内容放入状态。

componentDidMount() {
  getGenres().then(res => {
    const genres = [{ _id: "", name: "All Genres" }, ...res];
    this.setState({ genres });
  })
}

反应传播不可迭代实例的无效尝试

react Invalid attempt to spread non-iterable instance

fetch

setstate

reactjs