Question

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

当我检查时，我发现carousel内有carousel-item，但它们没有默认属性。

这是我的Carousel Class

carousel

这是我的卡组件

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;

请建议是否有其他方式，导入它。已经初始化了旋转木马，如果我尝试Materialize Example

，它就能正常工作

Answer 1

尝试在componentDidMount而非componentWillMount执行API调用。

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

使用前者，设置状态将始终导致重新渲染。 React文档建议从componentDidMount启动来自远程端点的数据请求。请参阅here。

Materialise carousel-item不继承默认属性

1 个答案: