代码之家  ›  专栏  ›  技术社区  ›  JamMan9

ReactJS API调用:未处理的拒绝(TypeError):无法读取未定义的属性“map”

  •  0
  • JamMan9  · 技术社区  · 7 年前

    我对ReactJS还比较陌生,但还是有点适应它。我不是一名前端开发人员,所以下面的问题可能是其他React开发人员的共同知识,但我找不到任何其他问题直接回答我这里的问题。

    [{
        "category_id": 85,
        "name": "STARTERS",
        "description": "Served with salad & mint sauce",
        "priority": 1
    }, {
        "category_id": 86,
        "name": "TANDOORI DISHES",
        "description": "Tandoori dishes are individually marinated in tandoori spices, herbs & yoghurt sauce & cooked in charcoal oven emerging crisp, fragrant & golden red. Served with salad & mint sauce",
        "priority": 2
    }, {
        "category_id": 87,
        "name": "TANDOORI MASALA",
        "description": "Special Tandoori Masala",
        "priority": 3
    }]
    

    我正试图通过ReactJS项目调用此API:

    import React, { Component } from 'react';
    
    class Api extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: []
        };
      }
    
      componentDidMount() {
        fetch("https://my-api.com/category")
          .then(res => res.json())
          .then(
            (result) => {
              this.setState({
                isLoaded: true,
                items: result.items
              });
            },
            // Note: it's important to handle errors here
            // instead of a catch() block so that we don't swallow
            // exceptions from actual bugs in components.
            (error) => {
              this.setState({
                isLoaded: true,
                error
              });
            }
          )
      }
    
      render() {
        const { error, isLoaded, items } = this.state;
        if (error) {
          return <div>Error: {error.message}</div>;
        } else if (!isLoaded) {
          return <div>Loading...</div>;
        } else {
          return (
            <ul>
              {items.map(item => (
                <li key={item.category_id}>
                  {item.name} {item.description}
                </li>
              ))}
            </ul>
          );
        }
      }
    }
    
    export default Api;
    

    Unhandled Rejection (TypeError): Cannot read property 'map' of undefined
    

    然后在渲染方法中从上方指向以下行:

    {item.name} {item.description}
    

    有人能指出我哪里出了问题吗?

    2 回复  |  直到 7 年前
        1
  •  1
  •   Wai Ha Lee captain-yossarian from Ukraine    7 年前

    尝试将items:result.items更改为items.result-in

    (result) => {
      this.setState({
        isLoaded: true,
        items: result.items
      });
    },
    

    意思是说

    (result) => {
      this.setState({
        isLoaded: true,
        items: result
      });
    },
    
        2
  •  0
  •   Amir-Mousavi    7 年前

    这个 fetch 在里面 componentDidMount 是一个 async 打电话时,您不会等待响应完全得到解决。

    async componentDidMount() {
      const response = await fetch("https://my-api.com/category");
      const json = await response.json();
       this.setState({ items: json });
    }