首页 > 解决方案 > 我不断收到此错误:TypeError: data.map is not a function

问题描述

我正在尝试使用 django 创建一个站点并做出反应,但是当我尝试查看它时,我不断收到此错误 TypeError: data.map is not a function。以下是我的代码,我似乎不知道问题所在

我正在尝试使用 django 创建一个站点并做出反应,但是当我尝试查看它时,我不断收到此错误 TypeError: data.map is not a function。以下是我的代码,我似乎不知道问题所在

class ProductList extends React.Component {

    state = {
        loading: false,
        error: null,
        data: []
      };

      componentDidMount() {
        this.setState({ loading: true });
        axios
          .get(productListURL)
          .then(res => {
            this.setState({ data: res.data, loading: false });
          })
          .catch(err => {
            this.setState({ error: err, loading: false });
          });
      }

      render() {
        const { data, error, loading } = this.state;
        return (
          <Container>
            {error && (
              <Message
                error
                header="There was some errors with your submission"
                content={JSON.stringify(error)}
              />
            )}
            {loading && (
              <Segment>
                <Dimmer active inverted>
                  <Loader inverted>Loading</Loader>
                </Dimmer>

                <Image src="/images/wireframe/short-paragraph.png" />
              </Segment>
            )}
                <Item.Group divided>

                     {data.map(item => {
                        return <Item key={item.id}>
                                    <Item.Image src={item.image} />

                                    <Item.Content>
                                        <Item.Header as='a'>{item.title}</Item.Header>
                                        <Item.Meta>
                                        <span className='cinema'>{item.category}</span>
                                        </Item.Meta>
                                        <Item.Description>{item.description}</Item.Description>

                                    </Item.Content>
                                </Item>
                    })}
                </Item.Group>
            </Container>
            );
        }
    }

export default ProductList```

标签: djangoreactjs

解决方案


推荐阅读