Question

我正试图从我的api中获取数据，然后我正在使用match参数及其工作方式（我检查过）但是当我做地图时，这个错误发生了，我也不知道为什么：

× 未处理的拒绝（TypeError）：meetups.map不是函数

export default function Details({ match }) {
  const [meetups, setMeetups] = useState([]);
  useEffect(() => {
    async function loadMeetups() {
      const response = await api.get(`list/${match.params.id}`);
      setMeetups(response.data);
    }
    loadMeetups();
  }, [match.params.id]);

  return (
    <Container>
      <Content>
        {meetups.map(meetup => (
          <>
            <header>
              <p>{meetup.title}</p>
              <aside>
                <button type="button">Editar</button>
                <button type="button">Cancelar</button>
              </aside>
            </header>
            <Meetup>
              <div>
                <img
                  src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRCbLCtAN0pPHM3cEtNR0tEpFf6r6AIHOUMjOnAVl2srJO-5lQP"
                  alt=""
                />
              </div>
              <article>
                Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem 
                Ipsum has been the industry's standard dummy text ever since the 1500s, when an 
                unknown printer took a galley of type and scrambled it to make a type specimen 
                book. 
              </article>
              <footer>
                <p>SOME DATE</p>
                <p>SOMEWHERE</p>
              </footer>
            </Meetup>
          </>
        ))}
      </Content>
    </Container>

提前谢谢

Answer 1

要了解，让我们重新创建错误：

var x = {}
console.log(x.map) // undefined
x.map() // Uncaught TypeError: x.map is not a function ...

我怀疑如果添加这样的console.log语句，您会发现问题：

async function loadMeetups() {
  const response = await api.get(`list/${match.params.id}`);
  console.log(response, response.data)
  setMeetups(response.data);
}

为避免此错误，请验证response.data是一个数组

async function loadMeetups() {
  const response = await api.get(`list/${match.params.id}`);
  // if response or response.data is undefined, set data to empty array 
  const { data = [] } = response || {};
  // verify response.data is an array
  const isArray = Array.isArray(data)
  isArray && setMeetups(data);
}

如何解决错误：未处理的拒绝（TypeError）：meetups.map不是函数

1 个答案: