时间戳

首页 > 解决方案 > 在 React 的列表中渲染对象

reactjs - 在 React 的列表中渲染对象

问题描述

我想检索页面上的公司列表。我安慰传入的数据只是为了确定，它看起来如下

  "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": "56407787-472f-44c9-b726-189798c7e217",
            "address": {
                "street": "test street",
                "postcode": "test 12",
                "city": "test city",
                "country": "test country"
            },
            "contact_name": "Angy",
            "contact_phone": "33333333",
            "contact_email": "angy@test.fr",
        }

以下组件创建一个列表

import React from 'react';

import { makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import IconButton from '@material-ui/core/IconButton';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import EditIcon from '@material-ui/icons/Edit';

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        maxWidth: 752,
    },
    demo: {
        backgroundColor: theme.palette.background.paper,
    },
    title: {
        margin: theme.spacing(4, 0, 2),
    },
}));

function generate(props) {
    return props.data.results.map((com) =>
        <ListItem key={com.id}>
            <ListItemText primary={com.name}/>
            <IconButton edge="end" aria-label="edit">
                <EditIcon />
            </IconButton>
        </ListItem>
    )}

const Company = (props) => {
    const classes = useStyles();

    // console.log('data is ', props.data.results)

    return (
        <div className={classes.root}>
            <Grid container spacing={2}>
                <Grid item xs={12} md={6}>
                    <Typography variant="h6" className={classes.title}>
                        company list
                    </Typography>
                    <div className={classes.demo}>
                        <List> {generate(props)} </List>
                    </div>
                </Grid>
            </Grid>
        </div>
);
};

export default Company;

以下组件呈现列表：

import React from "react";
import axios from 'axios';

import Company from "./Company";

class CompanyList extends React.Component {

    state = {
        companies: []
    }

    componentDidMount() {
        axios.get('http://127.0.0.1:8000/companies')
            .then(res => {
                this.setState({
                    companies: res.data
                    });
                console.log(res.data)
            })
    }

    render() {
        return (
            <Company data={this.state.companies}/>
        )
    }
}

export default CompanyList;

我收到一个错误

TypeError: Cannot read property 'map' of undefined

我是 ReactJS 的新手，可能会遇到这个错误。我在这里做错了什么？

标签： reactjsmaterial-ui

解决方案

你的初始状态companies是一个空数组，你res.data是一个对象。最初，results空数组中没有。由于异步调用，您应该检查是否results存在。这(props.data.results||[])可能会解决您的问题。基本上它说是否有results使用它，否则使用一个空数组。

推荐阅读