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

Posted

技术标签:

【中文标题】API请求后在React渲染方法中访问状态【英文标题】:Accessing state in React render method after API request 【发布时间】: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 【参考方案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_titlethis.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 中,但是,您需要确保使用 转义,例如:&lt;div&gt;this.result.original_title&lt;/div&gt;

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

【讨论】:

【参考方案2】:

你可以简单地使用

this.state.result

在渲染内部。

【讨论】:

以上是关于API请求后在React渲染方法中访问状态的主要内容,如果未能解决你的问题,请参考以下文章

react-data-components 渲染组件(按钮),但无法访问在渲染方法之外定义的状态或函数

DOM 渲染后在 React 中执行 Vanilla JS 脚本

[DAY-01]React

如何通过使用功能组件更新 React 中的状态来重新渲染页面。?

React (Native) Context API 导致 Stack Navigator (React Navigation 5) 在状态更新后重新渲染

在 react/redux 中的 post 请求后渲染视图