Question

在react中，我可以在组件内设置变量，但是我很难在普通的JavaScript文件-list.js中设置var data = {}。

我使用Axios检索数据，但未定义data.map，但未定义数据，如控制台所示。我假设这是因为在从Axios.get检索数据之前调用了data.map。之所以这样说，是因为当我执行console.log（data）时，我可以在控制台中看到数据：

import React from 'react';
import Axios from 'axios';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

var data = {};

function componentDidMount() {
    Axios.get('http://localhost/api/get-coins/')
        .then(
            responseJson => {
                data = JSON.parse(JSON.stringify(responseJson.data));
                // console.log(data);
                return data;
            }
        )
        .catch(
            error => console.log(error)
        )
}

function SimpleTable(props) {
    const { classes } = props;
    data = componentDidMount();
    console.log(data);
    return (
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell numeric>ID</TableCell>
                        <TableCell>Name</TableCell>
                        <TableCell numeric>Price</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {data.map(n => {
                        return (
                            <TableRow key={n.id}>
                                <TableCell component="th" scope="row">
                                    {n.name}
                                </TableCell>
                                <TableCell numeric>{n.price}</TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </Paper>
    );
}

SimpleTable.propTypes = {
    classes: PropTypes.object.isRequired,
};

如何首先检索数据，然后调用SimpleTable原型？

我用setTimeout尝试了以下操作，但是我收到一个返回null的错误消息，但是再次，我在控制台中看到了数据：

function SimpleTable(props) {
    var data = {};

    const { classes } = props;
    data = Axios.get('http://local.sites/ng6crud/api/get-coins/')
        .then(
            responseJson => {
                data = JSON.parse(JSON.stringify(responseJson.data));
                console.log(data);
                setTimeout(function () {
                    return (
                        <Paper className={classes.root}>
                            <Table className={classes.table}>
                                <TableHead>
                                    <TableRow>
                                        <TableCell numeric>ID</TableCell>
                                        <TableCell>Name</TableCell>
                                        <TableCell numeric>Price</TableCell>
                                    </TableRow>
                                </TableHead>
                                <TableBody>
                                    {data.map(n => {
                                        return (
                                            <TableRow key={n.id}>
                                                <TableCell component="th" scope="row">
                                                    {n.name}
                                                </TableCell>
                                                <TableCell numeric>{n.price}</TableCell>
                                            </TableRow>
                                        );
                                    })}
                                </TableBody>
                            </Table>
                        </Paper>
                    );
                }, 1000);
            }
        )
        .catch(
            error => console.log(error)
        );
}

我感觉像在React一样，我在奋斗中的每一步。请先帮助并谢谢

编辑：感谢@guillaume的回答。我能够使它工作。我想指出的是，我试图在不创建类或组件的情况下执行此操作，但是我想在渲染发生之前无法及时获取数据。

import React from 'react';
import Axios from 'axios';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

class List extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: []}
    }

    componentDidMount() {
        Axios.get('http://localhost/api/get-coins/')
            .then(
                responseJson => {
                    this.setState({
                        data: JSON.parse(JSON.stringify(responseJson.data))
                    });
                    return this.state.data;
                }
            )
            .catch(
                error => console.log(error)
            )
    }

    render() {
        return (
            <Paper>
                <Table>
                    <TableHead>
                        <TableRow>
                            <TableCell numeric>ID</TableCell>
                            <TableCell>Name</TableCell>
                            <TableCell numeric>Price</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {this.state.data.map(n => {
                            return (
                                <TableRow key={n.id}>
                                    <TableCell component="th" scope="row">
                                        {n.id}
                                    </TableCell>
                                    <TableCell component="th" scope="row">
                                        {n.name}
                                    </TableCell>
                                    <TableCell numeric>{n.price}</TableCell>
                                </TableRow>
                            );
                        })}
                    </TableBody>
                </Table>
            </Paper>
        );
    }
}

export default List

Answer 1

除非使用react-pure-lifecycle，否则不能在功能组件内部使用React生命周期方法。

当前，您的函数componentDidMount就是这样：您自己定义的函数。它的行为不像React的componentDidMount方法那样。

您需要使用类组件才能使用此方法：

class SimpleTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data: []}
    }

    componentDidMount() {
        Axios.get('http://localhost/api/get-coins/')
            .then(
                responseJson => {
                    this.setState({
                        data: JSON.parse(JSON.stringify(responseJson.data));

                    });

                    return data;
                }
            )
            .catch(
                error => console.log(error)
            )
    }

    render() {
        const { classes } = props;
        return (
            <Paper className={classes.root}>
                <Table className={classes.table}>
                    <TableHead>
                        <TableRow>
                            <TableCell numeric>ID</TableCell>
                            <TableCell>Name</TableCell>
                            <TableCell numeric>Price</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {data.map(n => {
                            return (
                                <TableRow key={n.id}>
                                    <TableCell component="th" scope="row">
                                        {n.name}
                                    </TableCell>
                                    <TableCell numeric>{n.price}</TableCell>
                                </TableRow>
                            );
                        })}
                    </TableBody>
                </Table>
            </Paper>
        );
    }
}

Answer 2

map是一种数组方法，但是您将数据初始化为对象。执行var data = [];，您的组件将在空数组上成功调用.map并呈现一个空表。数据准备好后，重新渲染您的组件，然后表格将被填充。

React无法读取未定义的属性“地图”

2 个答案: