Реагировать поочередно на собственные элементы списка из массива состояний - PullRequest
Новая
       38

Реагировать поочередно на собственные элементы списка из массива состояний

1 голос
/ 01 октября 2019

Я ищу метод, в котором я могу использовать данные из массива и показывать по одному элементу за раз. Вот мой код: 

constructor(props) {
  super(props);
  this.state = {
    feed: [{
      username: ["Its_Jess: ", "Haro1d: "],
      caption: ["The New Photoshoot was so much fun!", "Had a great day at the beach"]
    }]
  }
}

renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return (
        <Card>
          <Text key={index}>{card.username}</Text>
          <Text key={index}>{card.caption}</Text>
          </Card>
        )
    })
}

render() {
    return (
       <View>
          {this.renderFeed()}
       </View>
    );
}

Я пытаюсь сделать так, чтобы у него был шаблон, подобный

Its_Jess: Новая фотосессия была такой веселой!

. Затем разделение между этой картой

Haro1d: Я отлично провел день на пляже

Однако вместо этого я получаю следующее:

Its_Jess: Haro1d: Новая фотосессия была очень веселой! Прекрасно провел день на пляже

1 Ответ

2 голосов
/ 01 октября 2019

попробуйте вот так.

ПРИМЕЧАНИЕ. Это руководство для вашего решения. 

const feed = [{
  username: ["Its_Jess: ", "Haro1d: "],
  caption: ["The New Photoshoot was so much fun!", "Had a great day at the beach"]
}];

const App = () => {
  return feed.map((card, index) => {
    return card.username.map((c, i) => {
      if(card.caption[i])
        return (
          <div key={index}>
            <span>{c}</span>
            <span>{card.caption[i]}</span>
          </div>
        );
    });
  })
}

ReactDOM.render(<App />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Вот ваше решение.

Вопрос: зачем делать ключ наподобие ${i}_${index}?
, когдапри рендеринге ленты ключ похож на индекс. поэтому у каждого компонента должен быть свой ключ, поэтому я делаю ключ по 2 индексам (i и index). 

  renderFeed = () => {
    return this.state.feed.map((card, index) => {
      return card.username.map((username, i) => {
        if (card.caption[i]) {
          return (
            <Card key={`${i}_${index}`}>
              <Text>{username}</Text>
              <Text>{card.caption[i]}</Text>
            </Card>
          );
        }
        return <React.Fragment />;
      });
    });
  };
...