如何将API中的数据保存到Reactjs中的状态？
在Reactjs中，可以将API中获取的数据保存到组件的状态中。以下是一种常见的做法：
- 首先，在React组件的构造函数中初始化状态对象，例如：
constructor(props) {
super(props);
this.state = {
data: null, // 初始化数据为null
};
}- 在组件挂载完成后（componentDidMount生命周期方法），使用fetch或axios等工具从API中获取数据。例如：
componentDidMount() {
fetch('https://api.example.com/data') // 替换为实际的API地址
.then(response => response.json())
.then(data => {
this.setState({ data: data }); // 将获取的数据保存到状态中
})
.catch(error => {
console.error('Error fetching data:', error);
});
}- 在组件渲染方法中，可以根据状态中的数据进行相应的渲染。例如：
render() {
const { data } = this.state;
if (data === null) {
return <div>Loading...</div>; // 数据还未加载完成时显示加载中的提示
}
return (
<div>
{/* 使用data进行渲染 */}
</div>
);
}通过以上步骤，API中的数据将被保存在React组件的状态中，并且在加载完成后进行渲染。请注意，这只是一种常见的做法，实际开发中可能会根据具体需求进行适当的调整。
推荐的腾讯云相关产品：无
希望以上解答对您有帮助！如果您对其他问题感兴趣，请随时提问。
相关·内容
我有以下问题：
我从数据库中获取数据(真值或假值)，并希望将其保存到useState中。我正在使用异步/等待获取。因此，保存到我的状态的值是未定义的。
这是我的代码：
const [myState, setMyState] = useState();
useEffect(() => {
myFunction()
async function myFunction () {
const req = await fetch("http://localhost:3001/api/getdata", {
headers: {
浏览 5提问于2021-12-17得票数 0
回答已采纳
对于如何做到这一点，我已经尝试了其他几种选择，例如
当我点击"Search“时，我试图查询API。目前，当我单击"Search“时，API会查询正确的URL，但我在访问返回的数据时遇到了问题。发送回的数据如下所示：
{
"option_activity": [
{
"id": "5f033b253c8cf100018a312f",
"bid": "0.6",
"ask": "1.0",
"midp
浏览 3提问于2020-07-10得票数 0
回答已采纳
假设我正在制作一个带有React的todo列表应用程序，它允许用户登录、创建自己的todo列表并对其执行CRUD操作。
我在那里看到两种方法：
当输入带有todo列表组件的页面时，从数据库(例如通过后端.API )获取列表项，并将其保存到组件状态。然后，在执行某种操作--例如向列表中添加一个新项--将包含新项的POST请求发送到API中，如果成功，则简单地将下一项添加到组件状态，而不需要对API进行任何新的获取--更改将被存储在react状态，直到我们刷新页面--在每个站点刷新新的GET请求到API之后，整个更新的列表也被检索并保存在状态中。
当输入带有todo列表组件的页面时，从数据
浏览 0提问于2019-09-11得票数 1
回答已采纳
1回答
我有一个api端点，它给出了一组成分。每种配料具有以下特性: id、名称、测量单元、密度(kg/lt)、成本/测量单元。我有几千种配料，而且还能不断增加。
我从后端服务器收到一个页面大小可变的分页api。
http://yoursite.com/api/ingredients?page=1&page_size=200
在客户端站点上，如何将我的状态形状w.r.t组织为page、page_size和ingredients。
在客户端，我希望每页只显示15-20项。因此，如何确保项目正确显示分页。
同样的，我也没有更多类似的材料。菜谱，用户等等。
将能够处理这么大的数据。
浏览 1提问于2017-11-16得票数 0
回答已采纳
我在从API获取从子节点到父节点的数据时遇到了一个问题
孩子：
class Carton extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
matchData: []
};
}
在这里，我从API获取数据并更新状态
async componentDidMount() {
setTimeout(() => {
this.loading = true;
fetch(url)
.then(res => res.json()
浏览 2提问于2019-11-18得票数 0
如何在状态下保存从API中获取的对象，这样在页面刷新后，仍然可以使用available.How将从API中获取的数据保存到带有参数名的状态？ 因为我不想将对象保存在本地存储或会话存储中。 这可能很有帮助，因为在获取到相同的API之前，它将检查对象是否已经存在，然后不需要对该API进行获取 假设我的应用编程接口类似于https://example.com/new/${numberID}/staff 当第一次为{numberID}=> 12ab1参数执行API时，它应该将该{numberID}的结果存储在状态中，现在当{numberID} => 13ab2参数再次更新时，它应该以这样
浏览 18提问于2020-05-03得票数 0
1回答
在定位如何将数据导入Oracle SQL Developer而不将数据插入表时，我遇到了一些困难。
我遇到的所有函数似乎都需要用户将其插入表中。
有谁知道这样做有什么办法吗？我没有创建临时表或插入现有表的权限。
谢谢!
浏览 2提问于2017-06-16得票数 0
回答已采纳
1回答
带有工作队列设计模式的API
、、、、
我正在构建一个连接到工作队列的API，并且在结构上遇到了问题。我正在寻找的是一个通过API接口的工作队列的设计模式。
详细信息：
我正在使用Node.js服务器和Express创建一个接受请求并返回JSON的API。这些请求可能需要很长时间来处理(非常数据密集型)，因此这就是我们使用队列系统(RabbitMQ)的原因。
例如，假设我向API发送了一个请求，需要15分钟才能处理。Express API对请求进行格式化，并将其放入一个RabbitMQ (AMQP)队列。下一个可用的工作人员将请求从队列中取出并开始处理。完成后(在本例中为15分钟)，它将数据保存到MongoDB中。……现在.
我的问
浏览 4提问于2013-10-09得票数 3
我是第一次接触react js，又一次陷入了一个问题。我正在尝试从api调用加载一个下拉列表。虽然我可以从API获取数据并将其保存到状态，但我不能使用它将其绑定到下拉列表。下面是我获取和绑定数据的代码： const initialState = {
venues: []
};
export default class AddLab extends Component {
constructor() {
super();
this.state = initialState;
this.getVenueList();
浏览 10提问于2020-10-30得票数 0
回答已采纳
1回答
如何将从数据库接收到的常量data导出到另一个文件？我需要在另一个文件中使用此数据。
interface Item {
id: string;
name: string;
}
export default function Books() {
const [items, setItems] = useState<Item[]>([]);
useEffect(() => {
async function getItems() {
try {
const { data } =
浏览 0提问于2021-01-09得票数 0
我使用checkbox通过json数据呈现一些map
Data.FacData.map((v, i) => (
<div key={i} className="CheckBox">
<input
type="checkbox"
name="Facilities"
value={v.id}
onChange={this.getFacilities}
id={"Facilities-"+v.id}
/>
<l
浏览 4提问于2020-01-03得票数 1
回答已采纳
我在ReactJ中有一个代码，这只是一个选择。请求运行良好，但我希望将其结果保存到一个变量(或类似于此)中。我该怎么做？
const data;
async function selecionaSubsistemas() {
return Axios.post("http://localhost:3001/api/selecionaSubsistemas", {
}).then((response)=>{
});
}
const getData = async() => {
浏览 3提问于2021-09-17得票数 0
回答已采纳
我在应用程序中有以下组件结构：
class Car extends Component {
constructor() {
super();
this.state = {
cars: [],
...
}
}
componentDidMount() {
axios.get('/api/cars')
.then((response) => {
this.setState({cars: r
浏览 4提问于2018-09-02得票数 1
回答已采纳
在ReactJS中，我将路由更改为具有“id”的新路由，然后基于此"id"，我必须调用API并获取数据。
我已经在componentDidMount和componentWillMount中使用了API调用，并尝试使用setState()来使我的数据处于状态。但它们在我的情况下不起作用。
问题出在render()部件中，当我想要使用我的数据(from状态)时，数据不在那里，因为API调用需要一些时间来更新状态。
下面是我的代码：
componentDidMount() {
api.get(id).then((response) => {
this.se
浏览 0提问于2017-10-20得票数 5
回答已采纳
保存日志数据
我在记录数据方面有任何问题。我想把这个日志保存到数据库中，你能告诉我如何将日志保存到数据库中吗？我用morgan登录API
浏览 3提问于2018-06-29得票数 0
回答已采纳
我在UWP项目中使用SQLite数据库EFCore 2.0预览。地址表被分割成不同的实体。
发货地址，发票地址使用
modelBuilder.Entity<Project>().OwnsOne(p => p.DeliveryAddress);
它可以很好地设置数据库，通过迁移可以在数据库中创建不同的表。通过手动输入的测试数据，可以很好地从这些表中读取数据。但是如何将更改保存到DeliveryAddress表中。当我保存使用时，没有任何东西被持久化到数据库：
public void UpdateDeliveryAddress(Project modifiedProject)
{
浏览 0提问于2017-06-11得票数 0
我正在使用reactjs将表单数据发布到api，我正在尝试找出响应，这样我就可以在fetch函数上进行一些错误处理。我的回答如下，但它是200： {} 那么，我该如何将其放入响应代码中呢？ 我的提交函数是： handleSubmit(e) {
e.preventDefault();
/*global fetch */
this.setState({ loading: true});
fetch('https://bac1eal279.execute-api.eu-west-2.amazonaws.com/dev',{
method:
浏览 34提问于2020-04-26得票数 0
回答已采纳
下面是我的reg_form.jsx，它的GenderField必须包含一个带有三个选项的选择。这些选项在后台定义，并通过API发送。这些值用于后端和前端验证，所以我不想重复它们。
此外，我不想在一个文件中定义所有字段，因为假设完成后有30个字段，将它们都放在reg_form.jsx中将是一个巨大的混乱。
我的问题是:如何将来自GenderField调用的值提供给导入的API？我是否应该在每个需要后端数据的组件文件中进行API调用(大约有20个fields=20 API调用？)或者，是否有一种方法可以执行一次API调用并将数据分发到组件？
import React from 'react
浏览 0提问于2016-10-12得票数 0
大家好，我有这个项目，一个食谱网络应用程序，为我学习更好的反应
这是我从API获取数据的主页组件
配方组件:循环来自useState的数据并将其传递给配方组件
现在，我想创建一个组件，当用户单击内容时，它会将他/她重定向到新页面
。问题是，我不知道如何将数据从Recipes组件传递到Recipe，并将它们输出到用红色笔标记的区域。我们如何在不获取另一个API (它是有限的)和不使用redux的情况下做到这一点。需要帮助
浏览 6提问于2020-08-01得票数 1
回答已采纳
2回答
我需要你的帮助。我试着从他们那里收集数据。我拿到了链接和钥匙。看起来是这样的：
https://api.themoviedb.org/3/movie/76341?api_key=428850e5a5a362ac3ab4dccc1969b0a1
当我搬到这里的时候，我会有json的。我试着在页面上显示数据。没有错误，但没有结果。问题是什么?如何在这里显示数据？这是我的密码
import React, {useEffect, useState} from "react";
export let GetMovies = () => {
const url = `https:
浏览 5提问于2021-06-12得票数 0
回答已采纳
我正在创建一个reactJS应用程序，它将显示一个移动电话列表。我目前正在调用一个API，将状态设置为响应，然后显示内容。我现在想在此增加排序顺序，但有困难。
当用户转到/phone/Apple/iPhone时，路由将呈现以下组件，该组件调用api、设置状态并将数据传递给结果组件.
export default class Phones extends Component {
constructor(props) {
super(props);
this.state = {
data: null,
make: this.props.params
浏览 4提问于2017-04-17得票数 0
回答已采纳
我正在使用AWS ELB。在看到ELB的图形后，有很少的5XX错误。我启用了日志，并了解到其中一个到已注册实例的api call超时，因为ELB日志上的错误是504。我再次监控了注册的实例是否抛出了任何5XX响应，但并没有，nginx的keep-alive超时设置为15s，而ELB的超时设置为60s。因此，如果请求真的超时，那么它应该在实例级别超时，而不是在ELB级别超时。有没有人能建议一下可能的错误场景？
浏览 2提问于2016-06-17得票数 7
2回答
我使用axios来访问'http://localhost:8000/api/lists/'，在访问它之后，如果我使用console.log()，那么值将在控制台中打印，但在设置状态时，它会显示一个空数组。如何将res.data的值设置为setArrData()。有谁能帮我解决这个问题吗？ const [arrData, setArrData] = React.useState([])
useEffect(()=>
getData()
},[])
const getData=()=>{
let inp=field.inp
axio
浏览 23提问于2021-06-20得票数 1
我有一个CSV数据集，其'date‘属性如下所示：
2012-04-29
2012-04-29
2012-04-29
2012-05-05
2012-05-05
名称:日期，dtype: datetime64ns
我希望将唯一的日期值转换为整数值。因此，相同日期'2012-04-29‘的前3个值变为1，而相同日期'2012-05-05’的第二个值变为2，依此类推。
如何将“date”属性转换为新的整数属性/列(例如'date_int‘)？
谢谢
浏览 5提问于2020-06-10得票数 0
回答已采纳
我刚拾起反应，解决不了这个问题。
我有一个搜索组件，它嵌入在主应用程序组件中。在search中，我使用来自搜索栏的输入值进行API调用。但是，我不知道如何将数据返回到父组件(目前我使用了一个与API返回的数据类似的硬编码状态对象)，将我传递给另一个组件。
基本上:从子API中获取数据，将其传递给父程序并将其传递给其他两个孩子
import React, {Component} from 'react';
import GroupItem from './components/GroupItem'
import SearchBar from './comp
浏览 0提问于2019-01-17得票数 1
回答已采纳
我可以请你帮忙吗？我试图保存或存储文本框数据到钩子。但是，单击“保存”按钮后，文本框中的数据尚未保存到我的useState中。我需要再次点击保存按钮，以便能够将其保存到钩子。
见下面的代码。
const [updateApprovalStatus, setupdateApprovalStatus] = useState({
ADVISORYID: "",
STATUS: "",
REMARKS: "",
REJECTEDREMARKS: "",
});
const [txtAdvisoryApprovalRema
浏览 1提问于2021-03-05得票数 0
回答已采纳
1回答
我是新的反应，我认为基本已经沉入，但我被困在了一些东西。我们要重建我们的一个旧系统，我想要做出反应。
我们的系统是一个内部的CRM，每组客户数据都是一个Mb的大小，所以效率是我们的首要任务之一。逻辑是在一个单独的API上完成的，许多不同的系统都使用它，因此99%的前端是CRUD。
(我希望我能解释清楚！)
在我的问题上。如果我对客户端数据的一部分进行了小的更改，比如我向客户端添加了一个“审核”.还有很多其他数据可能会发生变化。复杂到我不想复制前端和API端的逻辑。
我是否需要让API返回完整的Mb数据，让根级的应用程序重新呈现它的所有组件？还是有更有效的方法来做到这一点？我应该设置每个组件来周
浏览 1提问于2017-07-12得票数 0
回答已采纳
我有简单的字段。我希望根据从axios响应中获得的数据来填充输入框。见下图 ? 我使用钩子将数据保存到状态。我的问题是如何在单击get details按钮(来自api的响应)时填充输入框。 请参阅以下代码 const [data, setData] = useState([])
const [advisoryDetails, setadvisoryDetails] = useState({
ADVISORYID: '',
ADVISORYDESC: '',
CREATEDBY:'',
MODIFIEDBY
浏览 29提问于2021-03-15得票数 3
回答已采纳
这是我第一次问堆叠溢出的问题，但是我在这个问题上被困了太多天了。
我的问题，我如何将initialConfig.editorState更改为我刚刚保存在数据库中的stringifiedEditorState？
到目前为止，我使用的是Lexical，一个带有React/Next.js的Facebook文本编辑器。我能够创建一个编辑器并将它保存到我的mongodb数据库中，作为一个JSON字符串。
{
"root": {
"children": [
{
"children": [
浏览 9提问于2022-07-19得票数 0
我在react中使用axios从django后端获取信息，我正在获取用户数据，并将其存储在组件中的一个状态中，但我希望在另一个get的url中使用user_data状态中的属性之一，以从后端获取更多信息，我不知道我是否正确解释了，但代码如下：
state = {
user_data: [],
classes: []
}
componentDidMount() {
const config = {
headers: {
'Content-Type': 'application/json',
浏览 0提问于2020-11-13得票数 1
1回答
我最近刚开始学习react，我在缓存数据方面遇到了一个问题。这是我的主意，我不知道这是不是正确的方法。对不起，英语不好，谢谢你的帮助。
我编写了一个钩子，允许在调用了以web url为键的api之后缓存数据，如果web再次调用那个api，它们将返回缓存的数据，而不是再次调用那个api。
我使用会话存储，因为它没有在浏览器选项卡之间共享数据，问题是我认为它会丢失页面刷新(F5)。一切正常，除非刷新网页，否则不可能从api获得最新数据(因为数据是从会话存储中获取的)。
问题
如果使用会话存储缓存数据的方法是正确的，则？如果是，那么当我刷新网页时，数据将来自api而不是会话存储。如果错误，那么缓存数
浏览 11提问于2022-05-23得票数 1
回答已采纳
我可以显示使用redux获得的JSON对象。但是当返回时，列表是空的。如何将发送到列表中的JSON对象作为 有效负载: return {类型: USER_INFO，有效负载：{ profile: list }，} export const USER_INFO = 'USER_INFO';
let list = [];
export function userAction(newValue) {
fetch("http://127.0.0.1:8000/api/account/me", {
headers: {
Authorizat
浏览 9提问于2019-10-07得票数 1
回答已采纳
我想知道如何将变量的值保存到localStorage。
我最近学习了如何在JavaScript中实现它，但是如何在ReactJ中实现呢？
浏览 0提问于2018-10-22得票数 0
回答已采纳
如何将API URL保存到本地存储，然后在应用程序加载时检索它。
正常的阅读和保存到本地存储是小菜一碟。
如何完成整个设置：
首选项服务，应该从本地存储保存或检索。
API服务，其中所有api调用都是进行的。
设置具有输入字段的设置API主机URL的组件。
当用户进入Settings页面并输入URL时，它将被保存到本地存储中。该数据应该由首选项服务获取，然后API服务应该获取数据并调用指定的URL端点。
问题是，当我尝试这个流时，api服务无法从本地存储获取URL，因此api调用失败。
应如何适当地执行这一原则？
浏览 1提问于2019-01-13得票数 0
回答已采纳
3回答
我一直在读表单API快速启动指南。我理解它是如何工作的，但我不知道如何将输入到表单中的数据保存到我自己的数据库Drupal样式中。还是我应该使用好的旧标准PHP连接到数据库，以便根据需要插入数据？
是否有类似于表单API快速入门页面的页面显示如何将模块与数据库集成？
浏览 0提问于2011-04-21得票数 4
回答已采纳
2回答
React返回一个空对象
、、、
我在从api接收数据时遇到了问题，我猜测数据可能在console.log()之后接收到？
我怎么才能解决这个问题？
fetch("https://www.cheapshark.com/api/1.0/games?title=batman")
.then(response => response.json())
.then(data => {
console.log(data[0])
})
此代码立即返回一个对象数据。
fetch("https://www.cheapshark.com/api/1.0/gam
浏览 2提问于2020-05-30得票数 1
回答已采纳
好的，我正在推进我的项目，从组件中的简单数据数组到对数据的API调用，并且由于在生命中总是如此，组件不再工作。API正在工作--我可以看到数据结果，但它只是没有在呈现中生成它们：
// function
showMainTestimonial(clientId) {
let results = [];
let linkButtonNode = null;
TestimonyApi.getAll()
.then(function (data) {
var data = data.data;
i
浏览 0提问于2015-10-18得票数 1
回答已采纳
我们有一个从下载的对象。我们试图将其保存到本地数据库，但没有保存任何内容。我检查了一下，如果我保存了一个小对象，那么它就会保存到数据库中。保存到本地数据库的对象的大小是否有限制？如果有，限制是什么？如果要将对象保存到本地数据库中，是否必须将对象划分为小对象？我们如何将任意对象划分为小对象并将它们保存到数据库中？
编辑：我指的是带有appAPI.db API的同步数据库。
浏览 1提问于2014-11-12得票数 0
我需要在我的应用程序中使用几个fetch请求来从不同的集合获取数据。因此，我想使用promises来让它工作。我从来没有使用过promises，尽管我在stackoverflow和其他网站上进行了研究，但我无法让它发挥作用。
本质上，我需要两个fetch请求，并且我想将这些请求的结果保存到两个不同的状态。
这是我目前所拥有的：
getFormData () {
fetch('/formdata', {
headers: {
'Content-Type': 'application/json',
浏览 7提问于2018-02-07得票数 3
回答已采纳
我正在获取api使用api密钥和数据从输入框，我得到了错误数组，必须提供查询。我可以从inputbox中获取数据。下面是代码。
class App extends Component {
constructor() {
super()
this.state = { movie: '', movieList: [] };
this.onGetMovie = this.onGetMovie.bind(this);
}
onGetMovie(data) {
this.setState({ movie: data });
conso
浏览 4提问于2018-08-09得票数 0
回答已采纳
我正在处理一个简单的可编辑的表格里面的表单，我必须启用和禁用使用按钮或复选框。
当我单击表外的clear按钮时，我想将表的值重置为其初始值。
当我单击该按钮时，我能够将状态值设置为其原始状态。在表中，可以刷新状态中的‘selectedrowkeys>’的值，但字段中的数据源值保持不变。
有没有人可以告诉我如何将表值重置为初始值？
<code>A0</code>
浏览 35提问于2020-06-07得票数 0
我正在用ReactJS创建一个表单，该表单在提交时创建一个主干模型并将其保存到我的数据库中。在保存之前，我希望在Backbone模型中进行验证，并在React视图中显示错误。实现这一目标的最好方法是什么？谢谢。
ReactJS表单视图的handleSubmit()：
handleSubmit: function () {
var foo = new Foo({
title: this.state.title,
description: this.state.description,
startDate: this.state.startDate,
endDa
浏览 0提问于2015-01-21得票数 0
2回答
我想将API的名称保存到数据库中，然后调用它。我怎么能这么做？
示例：
我希望将这些API (Action1、Action2和Action3)的名称保存到数据库中，并在需要时调用它(因为我想重新排序或删除UI中的一些操作)：
public interface IMyAppService : IApplicationService
{
Task Action1();
Task Action2();
Task Action3();
}
那么，如何将API名称作为字符串存储在数据库中，然后如何执行呢？我应该这样储存
浏览 5提问于2017-10-23得票数 0
回答已采纳
我需要获取在ReactJS (JSX)中提交的表单数据，并将其提交给Express API后端的app.post方法。我已经寻找了很长一段时间，但是我仍然不知道该怎么做。
我的前端表单代码：
import React, { Component } from 'react'
import '../public/styles/App.css'
import Header from "./header.js"
export default class Login extends Component {
render() {
浏览 0提问于2018-12-13得票数 2
在我之前的线程中，我试图找出setState我的react组件的最佳方式，并使状态为JSON
下面是我的JSON代码示例：
{
"Object1": {
"name": "1",
"rank": "2"
},
"Object2": {
"name": "3",
"rank": "4"
}
}
在我的React代码中，我就是这样设置state的
浏览 2提问于2018-08-17得票数 2
回答已采纳
1回答
我正在尝试创建一个严重依赖位置的应用程序。我使用来允许用户选择一个位置并将其添加到数据库中。我目前的问题是，我似乎不知道如何从google将JavaScript api保存到数据库中。例如，Suzy选择了一个商店，并希望将商店及其位置保存到数据库中。我似乎想不出如何将存储位置保存到数据库中。知道怎么做吗？
浏览 0提问于2019-07-21得票数 1
回答已采纳
1回答
我有一个reactjs表单，在页面加载它将显示数据库中的所有值，用户可以更改和提交。当我尝试更改输入值时，它会更新状态，但不会更新UI。 以下是示例代码。我的表单有许多输入控件。 const [user, setUser] = useState({});
useEffect(() => {
//calling api and update state on page load
setUser(response);
}, [])
const handleChange= (e)=>{
let track= user;
track[e.targe
浏览 13提问于2021-10-05得票数 1
回答已采纳
我只需要一点关于通过api获取数据的帮助
目前，我的容器中有以下代码
fetchAll: () => {
Promise.resolve(token.getToken()).then( (response) => {
let obj = {
token_type: response.data.token_type,
access_token: response.data.access_token
}
apiFetch("
浏览 1提问于2017-06-09得票数 0
1回答
如何将多项选择列表视图中的信息保存到数据库中？我想保存列表中某项的状态。例如，如果我选中了2个项目，我希望将此状态保存在数据库中。
谢谢
浏览 4提问于2011-06-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
