Почему этот компонент реакции не отображает загруженный контент? - PullRequest
Новая
       5

Почему этот компонент реакции не отображает загруженный контент?

0 голосов
/ 16 марта 2020

Я работаю над этим проектом и хочу отобразить содержимое, полученное с внутренних маршрутов через ax ios, в компонент Showcase. Но код не выдает результат, как ожидалось, обновленное состояние console.log (продолжение) работает и не создает проблем, но не отображает содержимое. Состояние приложения. js получает компонент. Я хочу отобразить имена. Дочерний функциональный компонент выглядит следующим образом. 

import React from 'react';
import {
    Table,
    Button
} from 'reactstrap';

function Showcase(props) {
    const title = props.title;
    const contents = props.contents;
    let items_body = [];

    items_body = contents.map(cont => {    
        console.log(cont)
        if(cont.category === 'Men') {
            return (
                <div className="item_card" key={cont._id}>
                    <div className="itemC_right">
                        <div className="itemCR_topA">
                            <div className="itemCR_topA_title">{cont.name}</div>
                        </div>
                    </div>
                </div>
            )
        }
        else if(cont.category === 'Women') {
            return (
                <div className="lead content d-flex d-flex justify-content-center mb-3" key={cont.id}>
                    <div>Name : {cont.name}</div>
                </div>
            )
        }
        else if(cont.category === 'Kids') {
            return (
                <div className="lead content d-flex d-flex justify-content-center mb-3" key={cont.id}>
                    <div>Name : {cont.name}</div>
                </div>
            )
        }
        else 
            return (
                null
            )
    })

    return (
        <div id="showcase">
            <div id="showcase_card">
                <div className="row">
                    <div className="col-sm-6 d-flex flex-row mt-1">
                        <h1 className="display-3 txt_secondary text-left" id="showcase_title">{title}</h1>
                    </div>
                    <div className="col-sm-6 d-flex flex-row-reverse mt-4">
                        <small className="txt_secondary text-right">Oreo is a online shopping store made just for you.</small>
                    </div>
                </div>

                <div>
                    {items_body}
                </div>

            </div>
        </div>
    )

}

export default Showcase;

Приложение. js Компонент класса 

class App extends React.Component {      
  state = {
    title: 'Oreo',
    contents: []
  }

  changeState = (category,data) => {
    this.setState({
      title: category,
      contents: data
    })
  }

  handleNavigation = (e) => {
    const option = e.target.innerHTML;
    switch(option) {
      case "Men":
          axios.get('/api/items/men/2')
            .then(res => {
              this.changeState('Men',res.data);
              // console.log(res.data)
            })
        break;
    }
  }

  render() {
    return (
      <div>
        <NavigationBar handleNavigation={this.handleNavigation} />
        <Showcase title={this.state.title} contents={this.state.contents} />
        <ItemWindow />
        <BottomBar />
      </div>
    );
  }
}

export default App;

В NavigationComponent. js при нажатии на Men я отправляю его в приложение . js тогда он обрабатывает событие click. Почему Showcase. js не может показать / отобразить результаты? Помощь.

1 Ответ

0 голосов
/ 17 марта 2020

Итак, я избавился от операторов if в Showcase. js и смог получить свои результаты. Кажется, что я проверял категорию дважды (в handleNavigation и здесь). Я также добавил asyn c и жду как tonkalata путь.

...