将 IndexedDB 中的数据拉入数组并通过 ReactJS 输出

IT技术 javascript reactjs indexeddb react-jsx
2021-05-24 06:32:18

我的实际 Javascript 代码如下：

var schoolsData = new Array();
myDB.schools
.each(function(school) {
    console.log('"' + school.title + '" wird auf den Array gepusht.');
    schoolsData.push(new Array(school.title, schools.schoolnumber, school.address, school.principal, school.email, school.creationdate, school.lastupdate, school.comment));
});
var SchoolsRender = React.createClass({
render: function() {
    return (
        <tr>
            {this.props.list.map(function(listValue){
                return <td>{listValue}</td>;
            })}
        </tr>
    )
}
});
ReactDOM.render(<SchoolsRender list={schoolsData} />, document.getElementById('schoolsDATA'));

如您所见，我正在尝试从本地 IndexedDB 数据库中提取数据（我使用的是 dexieJS）并通过 ReactJS 将其放入表元素中，但没有出现任何内容。重点在哪里？

编辑：我认为问题基本上是我试图输出该 3D 数组。有没有简单优雅的解决方案？

1个回答

添加另一个组件 RowRender 来渲染单行。相应地修改 SchoolsRender 组件。

var RowRender = React.createClass({
    render: function() {
        return (
            <tr>
                <td>{this.props.title}</td>
                <td>{this.props.schoolnumber}</td>
                <td>{this.props.address}</td>
                <td>{this.props.principal}</td>
            </tr>
        )
    }
});
var SchoolsRender = React.createClass({
    render: function() {
        return (
            <table>
                {this.props.list.map(function(listValue,index){
                    return <RowRender key={index} title={listValue.title} schoolnumber={listValue.schoolnumber} address={listValue.address} title={listValue.address}  />;
                })}
            </table>
        )
    }
});
其它你可能感兴趣的问题
上一篇React - 将 JSON 对象传递给所有无状态子组件 下一篇如何在props更改时重置组件中的状态