Question

我有一个组件，该组件呈现两个带有信息的单独表。每个表都有其自己的数组，可通过“地图”功能从中提取数据，每个元素都变成一个表数据元素。第一张表正确显示，但是，当我进入第二张表时，使用map函数后，元素似乎为“空”。

当我在Mozilla浏览器中的调试器中检查问题时，我看到的是一切都很好-数组不是未定义的，它有其元素。之后，在map函数中，“ x”元素应该是该元素。很好，但是，当我想从“ x”中选择特定的东西时（因为“ x”是一个对象本身包含许多带有值的不同键），例如x.name，则“ name”是未定义的。因此，似乎密钥是未定义的。也许我没有正确存储对象？

问题出现在DOM结构中，第二个表位于“ newShips.map”。

return (
    <div className="row">
        <div className="col-md-6">
            <MDBContainer className="float-left">
                <MDBRow>
                    <MDBCol md="6">
                        <p className="h5 text-center mb-4">Create Your Playlist</p>
                    </MDBCol>
                </MDBRow>
                <div>
                    <MDBTable hover>
                        <MDBTableBody>
                            {this.state.info.map(x => {
                                return <Fragment>
                                    <tr>
                                        <td>
                                            {x.name}
                                        </td>
                                        <button onClick={() => this.addToList(x)}>
                                            Add To Playlist
                                            </button>
                                    </tr>
                                </Fragment>
                            })}
                            <button onClick={this.setPreviousPage} className="float-left">previous page</button>
                            <button onClick={this.setNextPage} className="float-right">next page</button>
                        </MDBTableBody>
                    </MDBTable>
                </div>
            </MDBContainer>
        </div>
        <div className="col-md-6">
            <MDBContainer className="float-right">
                <MDBRow>
                    <MDBCol md="6">
                        <p className="h5 text-center mb-4">My Playlist</p>
                    </MDBCol>
                </MDBRow>
                <div>
                    <MDBTable hover>
                        <MDBTableBody>
                            {newShips.map(x => {
                                return <ul>
                                    <li>
                                        {x.name}
                                    </li>
                                    <button>Remove from Playlist</button>
                                </ul>
                            })}
                            <button onClick={this.setPreviousPage} className="float-left">previous page</button>
                            <button onClick={this.setNextPage} className="float-right">next page</button>
                        </MDBTableBody>
                    </MDBTable>
                </div>
            </MDBContainer>
        </div>
    </div>
)

我希望发生的是显示对象中的“名称”键，但是如果“ x”对象具有值，那么为什么“名称”属性未定义？

Answer 1

如果array不为null，请尝试以下代码段- var self = this

（即使上下文不断变化，self仍用于维护对原始内容的引用。）

现在，

                        {self.state.newShips.map(x => {
                            return <ul>
                                <li>
                                    {x.name}
                                    .
                                    .
                                    and so on

希望有帮助！祝你好运！

Answer 2

显然今天早上我把它整理了！问题是这样的->在控制台在浏览器中记录阵列后，我注意到在对象的开头有这个“ 0”：

0: Object { name: "EF76 Nebulon-B escort frigate", model: "EF76 Nebulon-B escort frigate", manufacturer: "Kuat Drive Yards", … }

由于我映射的数组内部有很多数组，每个数组都包含每个单独的对象，该对象的值为'0'，所以我对自己说：“也许与索引有关。”所以我放了一个[[0]]：

{ship[0].name}

就在那里-成功！

在填充数组项上的映射函数显示为空后

2 个答案: