html - Materialize carousel-item 不继承默认属性

Question

能够从 API 获取数据。但问题是当我尝试在类 carousel 中映射 carousel-item 时。属性不会被继承。

当我检查时，我看到 carousel 中有 carousel-item，但它们没有默认属性。

---

这是我的轮播类

class Carousel extends Component {
constructor(props){
  super(props);
  this.state = { albums: [] };
}
    componentWillMount() {
      axios.get('http://rallycoding.herokuapp.com/api/music_albums')
        .then(response => this.setState({albums: response.data}));
    }
    renderAlbums(){
      return this.state.albums.map(album =>
            <Card song={album.title} singer={album.artist} src={album.thumbnail_image}/>
      );
     }
  render() {
    return (
      <div className="carousel center">
        {this.renderAlbums()}
      </div>
    );
  }
}
export default Carousel;

---

这是我的卡片组件

import React, { Component } from 'react';
import '../../App.css';

class Card extends Component {
  render() {
    return (
      <div className="carousel-item center">
        <div className="card z-depth-4">
          <div>
            <img src={this.props.src} className="responsive-img"/>
          </div>
          <p>{this.props.song}</p>

          <div className="singer">{this.props.singer}</div>
        </div>
      </div>
    );
  }
}
export default Card;

---

请建议是否有任何其他方式导入它。已经初始化了轮播，如果我尝试 Materialize Example 它就可以工作

Answer 1

尝试在 componentDidMount 而不是 componentWillMount 中执行 API 调用。

后者在初始渲染之前被调用，因此，如果您的 API 调用在组件完成安装之前返回，setState 语句将不会导致重新渲染.

对于前者，设置状态总是会导致重新渲染。 React 文档建议从 componentDidMount 发起来自远程端点的数据请求。参见 here .