当我打印console.log(data.results);
时,它给出了一个对象数组。
我需要获取original_title,所以该名称为data.results[0].original_title
,但在控制台中
data.results未定义
最后,我想从对象数组中获取每个original_item。
import './AutoCompleteText.css'
export default class AutoCompleteText extends React.Component {
constructor(props){
super(props)
this.state = {
inputText: '',
movies: null
};
}
onTextChange = (event) => {
const value = event.target.value;
this.setState(() => ({ inputText: value }));
this.componentDidMount()
}
async componentDidMount(){
const valuee = this.state.inputText;
const api_key = 'fee1974c04959ee06151f1e6569934b6';
const url = `https://api.themoviedb.org/3/search/movie?api_key=${api_key}&language=en-US&query=${valuee}`;
const response = await fetch(url);
const data = await response.json();
this.setState({movies: data.results})
console.log(data.results);
}
render () {
const { inputText } = this.state;
return (
<div className="AutoCompleteText">
<input value={inputText} onChange={this.onTextChange} type="text" />
</div>
)
}
};
最佳答案
通过使用.map()进行了修复,谢谢Prasad Telkikar
this.state.movies.slice(0, 8).map(item => {
return <li id={item.id} onClick={this.onClickfunction.bind(this, item.title)} > {item.title} <p>{item.vote_average} Rating, {item.release_date.slice(0, 4)}</p> </li>