Question

因此，我正在创建一个简单的React应用，该应用从JSON API服务器获取数据并将其显示在表格中。这是主要组件的代码：

import React, {Component} from "react"
import Table from "./Table.js"

class Main extends Component{
    constructor(props) {
        super(props);
        this.state = {
            array: null
        }
    }

    render(){
        return(
            <div>
                <Table array={this.state.array} />
            </div>
        )
    }

    componentDidMount() {
        console.log("Checking");
        fetch("https://api.myjson.com/bins/1exld0")
            .then(response => response.json())
            .then(data => {
                console.log(data);
                this.setState({ array: data })
            });
    }
}

export default Main;

但是，当我运行该应用程序时，该表未呈现。这与componentDidMount函数无法正常工作有关，因为我有一行代码：

console.log("Checking")

并且控制台不记录任何内容。

有人可以帮忙吗？

编辑：这是Table和TableRow组件：

import React, {Component} from "react"
import TableRow from "./TableRow.js";

class Table extends Component{
    constructor(props){
        super(props);
        this.state={

        }
    }

    render(){
        var self=this;
        var items=this.props.array.map(function(item, index){
            return <TableRow obj={item} key={index}/>
        })

        return(
            <table>
                {items}
            </table>
        )
    }
}

export default Table

/

import React, {Component} from "react"

class TableRow extends Component{
    constructor(props){
        super(props);
        this.state={

        }
    }

    render(){
        return(
            <tr><td>{this.props.obj.color}</td><td>{this.props.obj.value}</td></tr>
        )
    }
}

export default TableRow

这是在浏览器中运行应用程序时出现的错误：

TypeError: Cannot read property 'map' of null:
var items=this.props.array.map(function(item, index){

Answer 1

在Main构造函数中将数组设置为空数组，而不是null。在加载异步数据之前会有一个初始渲染周期，并且由于无法映射到空数组而崩溃。

Answer 2

将componentDidMount（）从render（）方法中移出，即可对其进行修复

componentDidMount函数无法正常工作

2 个答案: