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_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
在渲染内部。
【讨论】:
以上是关于API请求后在React渲染方法中访问状态的主要内容,如果未能解决你的问题,请参考以下文章
react-data-components 渲染组件(按钮),但无法访问在渲染方法之外定义的状态或函数
DOM 渲染后在 React 中执行 Vanilla JS 脚本
如何通过使用功能组件更新 React 中的状态来重新渲染页面。?
React (Native) Context API 导致 Stack Navigator (React Navigation 5) 在状态更新后重新渲染