Динамически отображать список реагирования с семантическим интерфейсом - PullRequest
Новая
       18

Динамически отображать список реагирования с семантическим интерфейсом

0 голосов
/ 23 сентября 2018

У меня проблемы с динамическим отображением этого списка с использованием Semantic UI.Я получаю неожиданную ошибку токена, но я не совсем уверен, как заставить это работать.И users_titles, и users_entries - это массивы, установленные в состоянии, но сопоставленные с избыточностью, поэтому они имеют одинаковую длину.(Нерабочий) код ниже.Я просто хочу, чтобы список был упорядочен как (title-1..entry1, title2..entry2 и т. Д.).

Похоже, что вызывать другой компонент просто для того, чтобы создать список, кажется ненужным (и я все еще не совсем уверен, как он будет работать лучше).Я очень новый, чтобы реагировать и JS, поэтому любая помощь будет принята с благодарностью.Спасибо! 

class UsersPosts extends React.Component
...
displayListPosts = () => {

  for (let index = 0; index < this.state.users_entries.length; index++) {
  //debugger
  <List.Item>
    <List.Icon name='file outline' />
    <List.Content>
      <List.Header >
        {this.state.users_titles[index]}
      </List.Header>
      <List.Description>
        {this.state.users_entries[index]}
      </List.Description>
    </List.Content>
  </List.Item>

 }
}

...

render() {
const { loaded } = this.state
if (loaded) {
  return (
    <List>
      { this.displayListPosts() }
    </List>
  )

ОБНОВЛЕНИЕ:

После получения справки из принятого ответа рабочий код выглядит следующим образом: 

displayListPosts = () =>
this.props.posts.map((el) => (

  <List.Item>
    <List.Icon name='file outline' />
    <List.Content>
      <List.Header >
        {el.title}
      </List.Header>
      <List.Description>
        {el.entry}
      </List.Description>
    </List.Content>
  </List.Item>
));

, где posts - этореквизит в виде: 

[ {id:1,title:'Quis.',entry:'Lorem'...},
{id:2,title:'Consequatur.',ent…:31.999Z'},
{id:3,title:'Laboriosam.',entr…:32.004Z'},
{id:4,title:'Eum.',entry:'Eaqu…:32.010Z'},
{id:5,title:'Reiciendis.',entr…:32.015Z'},
{id:6,title:'Nemo.',entry:'Qui…:32.020Z'},...]

1 Ответ

0 голосов
/ 23 сентября 2018

Было бы лучше, если бы вы могли формировать свои данные в виде массива объектов.Как: 

[
  { title: "title1", entry: "entry1" },
  { title: "title2", entry: "entry2" }
]

С помощью этой формы вы можете легко отобразить ваши данные и использовать свойства.Но если вы хотите сделать это с вашей текущей ситуацией, вы можете отобразить одно свойство, а затем с помощью индекса вы можете использовать соответствующее свойство, так как длины равны.Не используйте для циклов, метод .map является вашим другом в большинстве случаев. 

class App extends React.Component {
  state = {
    user_titles: ["title1", "title2"],
    user_entries: ["entry1", "entry2"]
  };

  displayListPosts = () =>
    this.state.user_titles.map((el, i) => (
      // Maybe, there is a better key :D
      <div key={`${el}-${this.state.user_entries[i]}`}>
        <p>Title: {el}</p>
        <p>Entry: {this.state.user_entries[i]}</p>
      </div>
    ));
  render() {
    return <div>{this.displayListPosts()}</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>
...