我正在迈出我对 reactjs 的第一步。我为 the movie db API 创建了一个服务使用获取。我已经完成列出电影的名称。
我想做的是拥有一个完全独立的组件。连接到 API 的一个组件和其他组件负责呈现该信息。
现在我在同一个组件中拥有这两种行为:(
谁能帮帮我?
这是我的代码
import React, { Component } from 'react';
const listUrl = 'https://api.themoviedb.org/4/list/5?api_key=a6ebd775daadc2ec23c371e873e20a02&page=1';
class ListingService extends Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
fetch(listUrl)
.then((response) => {
if (!response.ok) {
throw Error('Network request failed');
}
return response;
})
.then((response) => {
return response.json();
})
.then((response) => {
this.setState({
movieName: response.results.map((movie) => {
return (
<li key={movie.id}>{movie.title}</li>
);
}),
});
}, () => {
this.setState({
requestFailed: true,
});
});
}
render() {
if (this.state.requestFailed) return <p>Failed!</p>;
if (!this.state.movieName) return <p>Loading...</p>;
return (
<div>
<h2><ol>{this.state.movieName}</ol></h2>
</div>
);
}
}
我有一个父组件,代码如下:
import React from 'react';
import ListingService from '../../services/listing/index';
const List = () => {
return (
<div>
<b>List of movies</b>
<ListingService />
</div>
);
};
export default List;
我应该为此使用 redux 吗?
最佳答案
最好的办法是制作一个 MovieList 组件,从您的 ListingService 中,您可以将电影 Prop 传递给它。
<MovieList movies={this.state.movieName}
与其将 ajax 调用中的电影名称保存为 jsx,不如将它们保存为数组中的字符串。
在您的 MovieList 组件中,通过电影数组进行映射
const MovieList = props => ( props.movies.map( (movie,i) => ( <ol><li key={i} >{movie.title}</li></ol> ) )
这是一个基本实现,但您可以扩展它以创建电影对象列表,这样您就可以保存 ID 并使 key 更具体。
关于javascript - reactjs 服务和表示组件拆分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47557212/