无法在子组件中查看<carousel.item>

时间:2019-01-10 18:43:31

标签: reactjs react-bootstrap

我创建了一个组件,该组件将获得ownerId并将获取此所有者的所有项目。 WS工作正常,但仍然无法查看Carousel.Item中的图像。没有错误信息,我不确定为什么吗?我的代码有什么问题?

预先感谢

这是父组件:

render() {

    const dd = this.state.ownersArr.map((item, index) => {
        return (
            <Col sm={4} key={item.ownerId}>
                <Panel>
                    <Carousel>
                        <UserPanel data={item.ownerId}></UserPanel>
                    </Carousel>
                </Panel>
            </Col>
        )
    });

    return (
        <div>
            <Row>
                {dd}
            </Row>
        </div>
    );
}

还有孩子:

export class UserPanel extends Component {
displayName = UserPanel.name

constructor(props) {
    super(props);
    this.state = {
        appData: []
    }
}

componentDidMount() {
    axios.get('api/items/wind instruments/' + this.props.data).then(response => {
        this.setState({ appData: response.data });
    })
        .catch(error => {
            if (error.response) {
                console.log(error.responderEnd);
            }
        });
}

render() {
    return (
        this.state.appData.map(item => {
            <Carousel.Item>
                <img width={900} height={500} alt="900x500" src={item.imageUrl} />
                <Carousel.Caption>
                    <h3>{item.ownerId}</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </Carousel.Caption>
            </Carousel.Item>
        })
    );
}
} 

谢谢

0 个答案:

没有答案