Я пытаюсь получить доступ к значениям, хранящимся в списке в моем компоненте реакции. При циклическом доступе все данные могут быть доступны, но недоступны для синтаксиса {variable.data_key}

Код: https://pastebin.com/wS5SL22n

Строка 9: я инициализировал список данных; строка 36: я начал циклически перебирать список данных. строка 38: я создал таблицу и попытался получить доступ к элементам из списка данных. строка 55: принять таблицу за строку состояния 79: отобразить содержимое

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);

    /* DATABASE */
    const movies = [
      {
        id: 0,
        src:
          "https://image.tmdb.org/t/p/w185_and_h278_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg",
        title: "movie one",
        overview: "overview one"
      }
    ];

    let movieRows = [];

    /* LOOPING THROUGH DATABASE */
    movies.forEach(item => {
      /* MAKING AN ELEMENT */
      const moveDataTable = (
        <table key={movies.id}>
          <tbody>
            <tr>
              <td>
                <img alt="poster" width="80" src={movies.src} />
              </td>
              <td>{movies.title}</td>
            </tr>
          </tbody>
        </table>
      );
      /* PUSING DATA TO THE LIST */
      movieRows.push(moveDataTable);
      console.log(movieRows);
    });

    this.state = { rows: movieRows };
  }

  render() {
    return (
      <div className="App">
        <p> {this.state.rows} </p>
      </div>
    );
  }
}

export default App;
1
user5282752 20 Авг 2018 в 17:16

3 ответа

Лучший ответ

Вы приняли ответ, но все же я хочу представить другую логику.

Основная проблема здесь вы пытаетесь найти не тот товар. Вы пытаетесь использовать movies, но в вашем цикле forEach это item. Хотя я не рекомендую использовать forEach, а затем устанавливать состояние. В какой-то момент могут быть некоторые глюки. Используйте map для таких ситуаций. Кроме того, не используйте ваш конструктор, как определение ваших функций.

const movies = [
  {
    id: 0,
    src:
      "https://image.tmdb.org/t/p/w185_and_h278_bestv2/7WsyChQLEftFiDOVTGkv3hFpyyt.jpg",
    title: "movie one",
    overview: "overview one"
  },
  {
    id: 1,
    title: "moview two",
    overview: "something"
  }
];

class App extends React.Component {
    state = { movies: [] };

  componentDidMount() {
    this.setState( {movies} );
  }

  createTable = () => (
    <table key={movies.id}>
      <tbody>
      { 
        movies.map( movie =>
            <tr>
              <td>
                <img alt="poster" width="80" src={movie.src} />
              </td>
              <td>{movie.title}</td>
              <td>{movie.overview}</td>
            </tr>
        )
      }
      </tbody>
    </table>
  );

  render() {
    return (
      <div className="App">
        {this.createTable()}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div> 
0
devserkan 20 Авг 2018 в 14:33

movies это массив, а не объект.

movies.forEach(item => ...) означает для каждого item в массиве movies. Отдельным элементом в массиве является item, а не movies. Вы пытаетесь отобразить movies.src и movies.title. В movies массиве отсутствует свойство src или title. Эти свойства находятся в item в массиве. Вы должны использовать item.src и item.title.

0
Charles Stover 20 Авг 2018 в 14:26

Вместо доступа к movie.id мне нужно было получить доступ к item.id, поскольку я назвал переменную как item в foreach loop.

0
user5282752user5282752 20 Авг 2018 в 14:30
51932732