TypeError:呈现数据时未定义

时间:2019-08-29 14:53:17

标签: javascript reactjs

我正在尝试从数据呈现卡并将其绑定到构造函数,但是仍然在使用this的所有行上都出现此错误。

class SamplePage2 extends Component {

constructor() {
    super()
    this.state = { accordionKey: 0, data: [] }
}

render() {

    const { accordionKey } = this.state;

    return (
        <Aux>
            <Row>         
                <div className="card-height">
                    {this.state.data.map(function (item, key) {
                        return (
                            <Card className='Recent-Users' key={key}>
                                <Card.Body className='px-0 py-2'>
                                    <Table responsive hover>
                                        <tbody>
                                            <tr className="unread" onClick={() => this.setState({ accordionKey: (accordionKey !== { key } + 1) ? { key } + 1 : 0 })} aria-controls="accordion1" aria-expanded={accordionKey === { key } + 1}>
                                                <td>
                                                    <h6 className="mb-1">{item.appName}</h6>
                                                </td>
                                                <td>
                                                    <h6 className="mb-1">{item.appState}</h6>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </Table>
                                    <Collapse in={this.state.accordionKey === { key } + 1}>
                                        <div id="accordion1">
                                            <Card.Body>
                                                <Card.Text>
                                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon official.
                                                    </Card.Text>
                                            </Card.Body>
                                        </div>
                                    </Collapse>
                                </Card.Body>
                            </Card>
                        )
                    })}
                </div>            
            </Row>
        </Aux>
    );
}

}

导出默认的SamplePage2;

0 个答案:

没有答案