Question

我正在处理我的第一个复杂的React应用程序，我正在向电影API发出请求。我的网站允许用户在搜索栏中搜索他们正在搜索的任何电影，节目，演员等。我正在拉用户的搜索查询并将其插入到这样的api请求中：

export const getDetails = (id) => {

return new Promise(function(resolve, reject) {
axios.get(`https://api.themoviedb.org/3/movie/` + id +`?api_key=&language=en-US`)
 .then(function(response) {
   resolve(response)
 })
 .catch(function(error) {
   reject(error)
 })
})


}

我能够获得这样的数据和console.log：

   import React, { Component } from 'react';
   import Header from '../header';
   import {Link} from 'react-router-dom';
   import axios from 'axios';
   import Footer from '../Footer.js';
   import Searchbar from '../header/searchbar.js';
   import List from '../results/list';
   import {getDetails} from '../api/getDetails';


class Detail extends Component {
    constructor(props) {
    super(props);
    this.state = {
            id: this.props.match.params.id,
            result: null,
            error: false,
    }
  }

    componentWillMount() {
        getDetails(this.state.id).then(function(response){
            this.setState({result: response});
            console.log(response.data.original_title);
            console.log(response.data.homepage);
            console.log(response.data.popularity);
            console.log(response.data.release_data);
            console.log(response.data.overview);
        }.bind(this)).catch(function(err) {
            this.setState({
                result:"There was a problem loading the results. Please try again.",
                error: true
            })
        }.bind(this))
    }

    render() {
        return(
            <div>
                <Header/>

                <div className="details-container">

                <h2>Details: </h2>


             </div>
            </div>
        )
    }
}

export default Detail

Console.logging它在componentWillMount函数中成功记录数据但我无法通过类似{response.data.orginal_title）访问渲染函数中的数据。如何呈现componentWillMount中记录的数据？

Answer 1

TLDR; 您可以通过this.state从渲染功能中访问状态变量。类似于：jsx之外的console.log(this.state.result.data.origin_title)和jsx中的{this.state.response.data.orginal_title}。

P.S。您使用的是正确的this。

以下是挑剔的建议和解释，请随意忽略。

建议您在componentDidMount中提出数据请求。这可以在componentDidMount的文档中阅读。
您已经在获取详细信息功能中使用了箭头功能，如果您将其余功能转换为箭头功能，则不再需要将this显式绑定到每个功能;它自动设置为它的父母。请参阅＆＃34;不分开这＆＃34; MDN docs
如果您不需要任何标题信息，我会将response.data保存到您的状态，这样您就不必在要访问数据时键入任何内容。 this.state.result.original_title vs this.state.result.data.original_title。那只是我和我懒惰。
axios确实回复了像埃里克所说的承诺，所以你实际上并不需要将它包含在额外的承诺中。您可以直接返回它，因为箭头功能会自动返回一行表达式，您可以将它们拼凑成一个衬里：
```
export const getDetails = id => axios.get(`https://api.themoviedb.org/3/movie/${id}?api_key=&language=en-US`)
```
最后，您应该可以从上面＃3中提到的渲染功能访问您在州内存储的数据。在JSX之外，您可以在JSX中将它控制为正常console.log(this.state.result)，但是，您需要确保使用{}转义，例如：<div>{this.result.original_title}</div>
< / LI>
这里的小工作示例：https://codesandbox.io/s/zqz6vpmrw3

Answer 2

您只需使用

即可

{this.state.result}

在渲染中。

在API请求之后访问React渲染方法中的状态

2 个答案: