Как исправить "ту же самую опору, передающуюся детям" в реакции JS? - PullRequest
Новая
       15

Как исправить "ту же самую опору, передающуюся детям" в реакции JS?

0 голосов
/ 07 июня 2019

Значит, я новичок в реакции js. Я создаю приложение для блога. Я храню данные блога в состоянии и передаю их дочернему компоненту. В следующем фрагменте кода у меня есть компонент Feeds, где я извлекаю данные из json и сохраняю их в состоянии. Я передаю данные дочернему компоненту Feed через подпорки. Теперь у меня есть компонент статьи, который является дочерним для канала, который открывается как модальный. Проблема, однако, не имеет значения, на каком канале я нажимаю, он открывает ту же статью (в зависимости от того, что было введено в последний раз).

Feeds.jsx 

import React, { Component } from "react";
import axios from "axios";
import Feed from "./Feed";

class Feeds extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoaded: false,
      feeds: []
    };
  }

  componentDidMount() {
    axios
      .get("http://localhost:5000/api/items")
      .then(res => res.data)
      .then(data => {
        this.setState({ isLoaded: true, feeds: data });
      console.log("data " + data);
     })
      .catch(err => console.log("Error !! : " + err));
  }

  render() {
    let { isLoaded, feeds } = this.state;

    if (!isLoaded) {
      return (
        <div>
          <h4> Loading ..</h4>
        </div>
      );
    } else {
      return (
        <div className="container-fluid">
          <Feed feedData={feeds} key={feeds.id} />
        </div>
      );
    }
  }
}
// const style for class Feed

export default Feeds;

Feed.jsx 

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import Article from "../component/Article";

class Feed extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
  }

  showModal() {
    this.setState({ showModal: true });
  }

  hideModal() {
    this.setState({ showModal: false });
  }

  render() {
    console.log("Id: " );
    console.log(this.props.feedData, "feedData");
    let modalClose = () => this.setState({ showModal: false });
    return (
      <div className="container-fluid">
        <ul className="list-group" key={this.props.feedData.id}>
          {this.props.feedData.map(feed => (
            <li
              className="list-group-item"
              style={styles.container}
              key={feed.id}
            >
              <div className="container">
                <div className="col-md-12">
                  <button
                    type="button"
                    className="btn btn-default"
                    onClick={() => this.showModal()}
                  >
                    <h3 style={styles.heading}>{feed.title} </h3>
                  </button>
                  <p>by - {feed.author}</p>
                  <p>{feed.subTitle}</p>
                  <div>
                    <span className="badge">Posted {feed.date}</span>
                    <div className="pull-right">
                      <button className="btn btn-primary">Upvote</button>{" "}
                      <button className="btn btn-info">Comment</button>{" "}
                      <button className="btn btn-danger">Report</button>{" "}
                    </div>
                  </div>
                  <br />

                  <Article
                    key={feed.id}
                    show={this.state.showModal}
                    onHide={modalClose}
                    data={feed}
                  />
                </div>
                <hr />
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

Article.jsx 

import React, { Component } from "react";
import { Button, Modal } from "react-bootstrap";

class Article extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    console.log("This is working. Visibility: " + this.props.visible);
    console.log("This is the id of the feed: " + this.props.key);
    return (
      <div className="article">
        <Modal
          {...this.props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        >
          <Modal.Header closeButton>
            <Modal.Title id="contained-modal-title-vcenter">
              {this.props.data.title}
            </Modal.Title>
          </Modal.Header>
          <Modal.Body>
            <h4> {this.props.data.subTitle} </h4>
            <p>{this.props.data.content}</p>
          </Modal.Body>
          <Modal.Footer>
            <Button onClick={this.props.onHide}>Close</Button>
          </Modal.Footer>
        </Modal>
      </div>
    );
  }
}

export default Article;

Я установил заголовок в Feed.jsx как кнопку, чтобы открыть модальное окно. Каждый канал открывает ту же статью и на консоли. это показывает, что идентификатор реквизита не определен ..

консоль: 

Id: Feed.jsx:22
(2) […]
​
0: Object { _id: "5cf24b53431f5f089496354b", author: "Arjun", title: "Liberalism and Loyality", … }
​
1: Object { _id: "5cf7a4b26332500efc0d1919", author: "Kapil Goel", title: "Made my first website", … }
​
length: 2
​
<prototype>: Array []
 feedData Feed.jsx:23
Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Feed`.for more information.
    in li (at Feed.jsx:29)
    in Feed (at Feeds.jsx:38)
    in div (at Feeds.jsx:37)
    in Feeds (created by Context.Consumer)
    in Route (at App.js:14)
    in div (at App.js:11)
    in App (at src/index.js:10)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:9) index.js:1375
    e index.js:1375
    React 5
    render Feed.jsx:26
    React 13
    componentDidMount Feeds.jsx:19
This is working. Visibility: undefined Article.jsx:10
This is the id of the feed: undefined Article.jsx:11
This is working. Visibility: undefined Article.jsx:10
This is the id of the feed: undefined Article.jsx:11
feedData is Array:  false Feeds.jsx:20
GEThttp://localhost:3000/sockjs-node/432/v3s4dxpn/websocket

Ответы [ 2 ]

3 голосов
/ 07 июня 2019

Мы не можем использовать ключевое слово key в качестве пользовательского реквизита в компоненте реагирования, поскольку оно предварительно зарезервировано в реакции.

В основном, ключевое слово key используется в итерации для идентификации элемента вцикл или предоставить уникальный идентификатор для элемента в цикле.

Вы можете использовать feedId в качестве опоры, 

<Article
  // key={feed.id}
  feedId={feed.id} // you can use feedId instead of key
  show={this.state.showModal}
  onHide={modalClose}
  data={feed}
/>

Также в Article.jsx, Вы используете this.props.visibleутешить, но вы не передали его в качестве опоры.

0 голосов
/ 07 июня 2019 
    axios
  .get("http://localhost:5000/api/items")
  .then(res => res.data)
  .then(data => {
    this.setState({ isLoaded: true, feeds: data });
  })
  .catch(err => console.log("Error !! : " + err));

Если бы вы могли console.log данных, прежде чем поместить их в setState.Важно знать, находятся ли данные в формате массива или нет.Вы либо не можете получить доступ к feeds.id для ключевой подпорки для компонента Feed в Feeds, либо у вас может возникнуть более серьезная проблема, поскольку вы обслуживаете компонент Feed объектом, даже если он ожидает массив

...