API请求后在React渲染方法中访问状态答案

【问题标题】：Accessing state in React render method after API requestAPI请求后在React渲染方法中访问状态
【发布时间】：2018-06-03 16:47:49
【问题描述】：

我正在开发我的第一个复杂的 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 中的数据？

【问题讨论】：

两件事。 1.axios.get返回一个promise，所以你不需要将它包装在另一个promise中。 2.你在this.setState中没有使用正确的this。
补充 Eric 的评论：在渲染方法中，您需要参考 {this.state.result.data.original_title} 因为您将数据设置为“结果”的组件状态键
我对使用正确的“this”有点困惑。我不小心使用了 componentWillMount 的 this 而不是 Detail 组件中的 this？我该如何纠正呢？
我建议你阅读 setState 和 React 中的组件状态。你打电话给setState，但你似乎不知道为什么。见reactjs.org/docs/state-and-lifecycle.html

标签： json reactjs components rendering

【解决方案1】：

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

附：您使用的是正确的this。

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

建议在componentDidMount中进行数据请求。这可以在componentDidMount 的文档中阅读。
您已经在获取详细信息函数中使用箭头函数，如果您将其余函数转换为箭头函数，则不再需要将this 显式绑定到每个函数；它被自动设置为它的父级。请参阅MDN docs
如果您不需要任何标题信息，我会将response.data 保存到您的状态中，这样您在访问数据时就不必输入太多内容。 this.state.result.original_title 与 this.state.result.data.original_title。那只是我，我很懒。
axios 确实像 Eric 所说的那样返回了一个 Promise，因此您实际上不需要将它包装在额外的 Promise 中。您可以直接返回它，因为箭头函数会自动返回一行表达式，您可以将其添加到一行中：
```
export const getDetails = id => axios.get(`https://api.themoviedb.org/3/movie/${id}?api_key=&language=en-US`)
```
最后，您应该能够通过上面#3 中提到的渲染函数访问您存储在状态中的数据。在 JSX 之外，您可以像正常的 console.log(this.state.result) 一样控制台记录它，在您的 JSX 中，但是，您需要确保使用 {} 转义，例如：<div>{this.result.original_title}</div>

这里的小工作示例：https://codesandbox.io/s/zqz6vpmrw3

【讨论】：

【解决方案2】：

你可以简单地使用

{this.state.result}

在渲染内部。

【讨论】：