После того, как функция карты на заполненных элементах массива кажется нулевой - PullRequest
Новая
       15

После того, как функция карты на заполненных элементах массива кажется нулевой

0 голосов
/ 18 апреля 2019

У меня есть компонент, который отображает две отдельные таблицы с информацией.Каждая из таблиц имеет свой собственный массив, из которого данные извлекаются с помощью функции map, и каждый элемент превращается в элемент данных таблицы.Первая таблица отображается правильно, однако, когда я попадаю во вторую таблицу, после использования функции карты элементы выглядят как «нулевые».

Когда я проверил проблему в отладчике в браузере Mozilla,то, что я увидел, было то, что вначале все было хорошо - массив НЕ был неопределенным, в нем были свои элементы.После этого внутри функции карты был элемент "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>
)

То, что я ожидаю, это отобразитьключ «name» от объекта, но если объект «x» имеет значение, почему свойство «name» не определено?

Ответы [ 2 ]

1 голос
/ 18 апреля 2019

Если массив не равен NULL, попробуйте следующий фрагмент: var self = this

(self используется для сохранения ссылки на оригинал, даже если контекст меняется.)

Теперь, 

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

Надеюсь, это поможет!Удачи!

0 голосов
/ 19 апреля 2019

Видимо сегодня утром я разобрался! Проблема заключалась в следующем -> после того, как консоль зарегистрировала массив в браузере, я заметила, что в начале объекта был этот «0»: 

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

И поскольку в массиве, который я отображал, было много массивов, каждый из которых содержал каждый отдельный объект с этим '0', я подумал про себя: «Может быть, это как-то связано с индексацией». Поэтому я поставил "[0]": 

{ship[0].name}

И это было - успех!

...