Одни и те же данные для разных элементов списка. React.js - PullRequest
Новая
       1

Одни и те же данные для разных элементов списка. React.js

0 голосов
/ 24 июня 2018

Я новичок в React.js и пытаюсь создать учебный проект.Проблема у меня заключается в следующем.У меня есть список JSON-объектов (постов), которые должны быть показаны, и при нажатии на заголовок, детали поста появляются в модальном окне.Но независимо от того, на каком клике я нажимаю, модальное окно всегда показывает мне только детали первого поста.Вот код: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>React App</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  </head>
  <body>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script crossorigin src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="./style.css">

    <script type="text/babel">
      const postsList = [
          {
            "id": "5",
            "title": "Lorem Ipsum dolor",
            "contents": "Commodo laborum sit nostrud reprehenderit cupidatat officia laboris. Ipsum minim culpa in enim. Voluptate dolor ea irure nisi incididunt enim magna. Cupidatat quis cillum velit culpa tempor esse irure nostrud ea consectetur officia fugiat irure qui. Enim quis officia do in. Velit veniam ipsum consequat aliqua duis voluptate. Minim nisi ex aute ad. Nisi Lorem ex tempor adipisicing labore. Quis occaecat fugiat pariatur labore culpa cillum laboris. Labore occaecat ut laborum sit ex do sit. Deserunt consectetur elit aute laboris est deserunt officia ullamco sit laboris officia aliquip. Aliqua ut sunt nostrud voluptate excepteur quis incididunt Lorem ut.",
            "published": "12.12.1221, 12:10",
            "author": {
            "nickname": "paladdin"
            }
          },
          {
            "id": "3",
            "title": "Ex sunt sunt aliqua",
            "contents": "Ex sunt sunt aliqua reprehenderit aliqua occaecat. Minim anim commodo officia veniam proident aute cillum eu sunt aute nostrud. Laboris fugiat velit ut pariatur occaecat adipisicing pariatur occaecat. Duis sint enim et consectetur quis pariatur laborum excepteur. Ipsum aliquip qui laborum commodo consectetur do velit veniam occaecat. Ad nisi dolor cillum elit magna dolor voluptate ea. Enim in duis ea consequat sunt Lorem aute.\n\nEst elit sunt quis officia reprehenderit do elit commodo eiusmod esse voluptate. Sit ipsum commodo sint voluptate culpa labore elit magna ullamco nostrud. Laboris magna magna anim labore mollit irure voluptate. Aute non magna aliqua aliqua sunt. Velit mollit consectetur aliqua id tempor ut. Tempor cupidatat aliquip excepteur occaecat incididunt nulla Lorem sint.\n\nNon commodo anim deserunt in et aliquip incididunt ut consectetur sunt esse commodo deserunt et. Tempor fugiat laboris cillum laboris labore. Deserunt quis ad do labore amet culpa officia. Esse et officia nostrud tempor occaecat officia anim incididunt amet sunt excepteur Lorem. Aute occaecat magna velit nisi sit anim consequat velit qui pariatur. Esse incididunt id officia aliqua anim ut et.",
            "published": "12.12.1221, 12:05",
            "author": {
              "nickname": "rebelizer"
              }
          },
      {
          "id": "1",
          "title": "Hello my new world",
          "contents": "Culpa dolor deserunt veniam irure amet officia excepteur labore nisi labore ad labore laborum aute. Ea irure sit exercitation ex. Aliquip dolore duis ullamco labore qui. Et anim irure laborum quis ipsum. Adipisicing culpa est ea velit veniam dolor nisi. Sit cupidatat velit commodo eu.\n\nUt nulla ut irure cillum irure sint sunt cupidatat tempor laboris incididunt elit occaecat fugiat. Reprehenderit enim cupidatat consectetur pariatur ad pariatur consequat veniam do fugiat Lorem laborum do velit. Nulla aute magna magna nisi officia et. Aute adipisicing eu eiusmod tempor exercitation sint non enim laboris dolor adipisicing.\n\nEa do sint pariatur voluptate ad culpa irure. Cillum pariatur deserunt fugiat elit. Exercitation labore amet deserunt magna. Velit veniam aute officia aliqua ipsum veniam pariatur. Aliquip ullamco fugiat officia non sunt ad consequat ipsum est esse commodo reprehenderit. Ad quis consectetur est exercitation fugiat eiusmod. Laborum reprehenderit esse qui irure.",
          "published": "12.12.1221, 12:00",
          "author": {
            "nickname": "rupetra"
            }
       }
    ];

      class Post extends React.Component {
        render() {
        const {post} = this.props;

        return (
          <div className = "card" style={{width: "100%"}}>
            <div className = "card-header text-center">
              <h2 data-toggle="modal" data-target="#post-details-modal">{post.title}</h2>
            </div>
            <div className = "card-body text-left">
              {post.contents}
            </div>
            <div className = "card-footer text-right text-muted">
              published on {post.published} by <i>{post.author.nickname}</i>
            </div>
            <div className="modal fade" id="post-details-modal">
              <div className="modal-dialog">
                <div className="modal-content">
                  <div className="modal-header">
                    <h4 className="modal-title">{post.title}</h4>
                    <button type="button" className="close" data-dismiss="modal" aria-label="Close"> x </button>
                  </div>
                  <div className="modal-body">{post.contents}</div>
                  <div className="modal-footer text-muted">created by {post.author.nickname}</div>
                </div>
              </div>
            </div>
          </div>
        );
      }
    }

    class PostList extends React.Component {
      render() {
        const {posts} = this.props;

        return posts.map((post) =>
          <div key= {post.id} className="posts">
            <Post post = {post}/>
          </div>
        );
      }
    }

      class App extends React.Component {
        render() {
          return (
            <div>
              <div className="row"></div>
              <div className="row">
                <div className="col-1 text-right mt-4">
                  <div>
                    <i className="fas fa-keyboard fa-3x mb-5"></i>
                  </div>
                  <div>
                    <i className="fas fa-redo-alt fa-3x mb-5"></i>
                  </div>
                </div>
                <div className="col-8 posts-zone">
                  <PostList posts = {postsList}/>
                </div>
                <div className="col-3"></div>
              </div>
              <div className="row"></div>
            </div>
          );
        }
      }

      ReactDOM.render(<App/>, document.getElementById("root"));
    </script>

    <div id="root"><div>
    </body>
</html>

Решение:

Благодаря Тиму Огилви , который дал мне идею rihgt, было найдено следующее решение:
В методе render () я создал 2 переменные: 

const dataTargetName = "#post-details-modal-" + post.id; 
const postDetailsId = "post-details-modal-" + post.id;

, а затем: 

<h2 data-toggle="modal" data-target={dataTargetName}>{post.title}</h2>

и: 

<div className="modal fade" id={postDetailsId}>

1 Ответ

0 голосов
/ 24 июня 2018

Вам необходимо использовать компонент с открытым и закрытым состояниями.Bootstrap и jQuery не являются правильным решением здесь.Кроме того, для большей части этого вы должны использовать компоненты без сохранения состояния.Ваша проблема в компоненте «Почта».

здесь вы устанавливаете то, что должно переключаться: 

<h2 data-toggle="modal" data-target="#post-details-modal">{post.title}</h2>

, а затем вы устанавливаете идентификатор на то же самоедля каждого сообщения в итераторе: 

<div className="modal fade" id="post-details-modal">

Попробуйте, например, следующее: (переключатель) 

<h2
  data-toggle="modal"
  data-target={`#post-details-modal-${post.id}`}
>
  {post.title}
</h2>

сообщение : 

<div className="modal fade" id={`post-details-modal-${post.id}`}>

Вы все равно должны рассмотреть возможность использования ReactBootstrap , но это может просто вывести вас из леса.

Принцип: Идентификаторы DOM должны быть уникальными.У вас есть несколько экземпляров одного и того же идентификатора, поэтому браузер только начинает первый.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...