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

Posted 2023-02-23

【中文标题】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_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

在渲染内部。