javascript - 填充数组项上的映射函数后似乎为空

Question

我有一个组件，可以呈现两个单独的带有信息的表。每个表都有自己的数组，通过“map”函数从中提取数据，并且每个元素都变成表数据元素。第一个表显示正确，但是，当我到达第二个表时，使用map函数后，元素显示为“null”。

当我在 Mozilla 浏览器的调试器中检查问题时，我看到的是，一切一开始都很好 - 数组不是未定义的，它有它的元素。之后，在 map 函数中，“x”元素就是它应该是的元素。一切都很好，但是，当我想从“x”中选择一个特定的东西时(因为“x”是一个对象本身，包含许多不同的键和值)，例如x.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>
)

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

Answer 1

如果数组不为空，则尝试下面的代码片段 - var self = 这个

(即使上下文发生变化，self 也被用来维护对原始 this 的引用。)

现在，

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

希望对您有帮助! 祝你好运!