В основном я получаю данные из своего API, данные выглядят так:

{
  "comments": [
    {
      "user": "user1"
      "text": "i'm a sample text1"
    },
    {
      "user": "user2"
      "text": "I'm a simple text2"
    },
}

Я хочу использовать только 2 записи comments['text'], и я хочу отображать их в моем HTML одну за другой, как мне этого добиться?

componentDidMount() {
// Call REST API to get info on comments
fetch(this.props.url, { credentials: 'same-origin' })
  .then((response) => {
    //deal with response
  })
  .then((data) => {
    this.setState({
      comment_text : data['text'],
    });
  })
}

И вот как я написал свою функцию рендеринга:

render() {
  // Render text for comments
  return (
    <div className="comments">
      <p>{this.state.data}</p>
    </div>
  );
}
0
byin0317 14 Окт 2019 в 09:13
Можете ли вы сказать мне, как будет выглядеть результат вашего желания?
 – 
Syed Afzal
14 Окт 2019 в 09:20
В вашем массиве comments больше двух объектов?
 – 
Nick Parsons
14 Окт 2019 в 09:21

3 ответа

Используйте карту, как говорили другие:

componentDidMount() {
// Call REST API to get info on comments
fetch(this.props.url, { credentials: 'same-origin' })
  .then((response) => {
    //deal with response
  })
  .then((data) => {
    this.setState({
      comment_text : data,
    });
  })
}
render() {
  // Render text for comments
  return (
    <div className="comments">
           {this.state.comment_text["comments"].map((value,key)=>{
                  return (<p>{value}</p>)})}
    </div>
  );
}
0
P4uB0rd4 14 Окт 2019 в 09:29

Если ваши данные сохраняются в this.state следующим образом:

{
  "comments": [
    {
      "user": "user1"
      "text": "i'm a sample text1"
    },
    {
      "user": "user2"
      "text": "I'm a simple text2"
    },
}

... и вы хотите, чтобы он выглядел так:

<div className="comments">
  <p>i'm a simple text1</p>
  <p>I'm a simple text2</p>
</div>

.. тогда то, что вы ищете в своей функции рендеринга, это:

render() {
  return (
    <div className="comments">
      {this.state.data.comments.map((comment, index) => <p key={i}>{comment.text}</p> )}
    </div>
  );
}
0
pederk 14 Окт 2019 в 09:35

Сохраните свое значение для состояния комментариев и в цикле отображения карты через все данные ur и установите его в ur html. Если это большой HTML-код, вам лучше создать компонент для этого. Тогда вы можете вызвать ur HTML-код внутри рендера. Я думаю, что это довольно стандартный и чистый способ отобразить ваши динамические данные в виде ur

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      comments: [
        {
          user: "user1",
          text: "i'm a sample text1"
        },
        {
          user: "user2",
          text: "I'm a simple text2"
        },
      ]
    };
  }

  render() {
    const d = this.state.comments.map(item => {
       return (
          <div>
            <p>{item.user}</p>
            <p>{item.text}</p>
          </div>
        )
    })

    return (
      <div>{d}</div>
    );
  }
}

Надеюсь, это поможет

0
sayalok 14 Окт 2019 в 09:44