Question

我正在研究这个项目，我想显示从后端路线通过axios到Showcase组件的内容。但是代码没有提供预期的更新状态控制台输出。log（cont）正常工作，没有问题，但没有呈现内容。组件接收到app.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;

App.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时，我会将其发送到App.js，然后它处理click事件。为什么Showcase.js无法显示/渲染结果？帮助。

Answer 1

所以我摆脱了Showcase.js下的if语句，可以得到我的结果。看来我两次检查了类别（在handleNavigation和此处）。我还添加了async和await作为tonkalata的方式。

为什么此React组件未显示已加载的内容？

1 个答案: