将嵌套对象从Axios响应复制到我的React本机钩子？
将嵌套对象从Axios响应复制到React本机钩子可以通过以下步骤实现：
- 首先，确保你已经在React项目中安装了Axios库，可以使用以下命令进行安装：
npm install axios- 在你的React组件中，使用
useState钩子来创建一个本地状态变量，用于存储从Axios响应中复制的嵌套对象。例如：
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const MyComponent = () => {
const [nestedObject, setNestedObject] = useState(null);
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const response = await axios.get('https://api.example.com/data');
setNestedObject(response.data);
} catch (error) {
console.log(error);
}
};
return (
<div>
{/* 在这里使用复制的嵌套对象进行渲染 */}
</div>
);
};
export default MyComponent;- 在上述代码中，我们使用
useEffect钩子来在组件加载时调用fetchData函数，该函数使用Axios发送GET请求并获取响应数据。然后，我们使用setNestedObject函数将响应数据中的嵌套对象复制到本地状态变量nestedObject中。 - 最后，在组件的JSX中，你可以使用复制的嵌套对象进行渲染，例如：
return (
<div>
{nestedObject && (
<div>
<h1>{nestedObject.title}</h1>
<p>{nestedObject.description}</p>
</div>
)}
</div>
);这样，你就可以成功将嵌套对象从Axios响应复制到React本机钩子，并在组件中使用它们进行渲染。
请注意，以上答案中没有提及任何特定的云计算品牌商，因为问题要求不提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商。
相关·内容
1回答
我正在创建一个响应拦截器来获取状态类型，并根据状态类型设置标志，以便可以根据标志值加载ant d模式弹出窗口。如何为每个http调用触发此拦截器，以及如何在响应拦截器中设置标志，以便可以在另一个typescript类中读取它以显示模式弹出窗口 从‘axios’导入axios，{ AxiosInstance }；从‘react’导入React，{ useState }； axios.interceptors.response.use(function(response){
console.log("New Interceptor response");
console.log(
浏览 28提问于2020-09-28得票数 0
回答已采纳
import Axios from "axios";
import React, { createContext, useEffect, useReducer, useState } from "react";
import useAsync from "./useAsync";
const [datas, setDatas] = useState(null);
const fatchData = async () => {
try {
const response = await Axios.get(
"
浏览 3提问于2020-09-21得票数 0
回答已采纳
我想知道如何在我的公理回答之后再去看另一个视图。
import axios from "axios";
import {useNavigate} from "react-router-dom";
export class EmployeeNetworking {
async authentication(email: string, password: string) {
const navigate = useNavigate();
await axios.post("http://localhost:3000
浏览 5提问于2022-10-04得票数 0
回答已采纳
1回答
我试图使用自定义钩子来发出HTTP请求，然后使用还原器更新组件中的状态。
钩子正确运行，我可以从请求中获得响应，但不能在调度函数中使用响应数据。
以下是代码：
HTTP钩子：
import React, { Fragment, useState, useEffect, useReducer } from 'react';
import axios from 'axios';
export const useHttpRequest = (initialData, initialURL) => {
const [url, setUrl] = useSta
浏览 4提问于2020-07-13得票数 0
回答已采纳
1回答
我正在开发一个MERN栈的问卷-每页一个问题。在一页上“指定名称”，单击“下一个问题”，在另一页上单击“指定公司名称”等)，大约40页。
当单击"Next“时，应用程序将用户的答案保存在localStorage中，从localStorage检索并发送axios.post到快递服务器，该服务器通过uuid查找MongoDB文档并使用新的答案进行更新。
问题是，并非所有的答案都保存在MongoDB中。在一些问题之后，答案将停止保存到MongoDB。只有当我重新启动快速服务器并再次尝试回答问题时，它才会将其保存到MongoDB。
我不知道怎么回事。欢迎任何建议。
这里是一个代码示例：
//R
浏览 3提问于2021-09-28得票数 2
回答已采纳
这是我的App.js文件，其中正在定义路由。
<div className="App">
<Router>
<NavBar />
<Routes>
<Route path={"/"} exact element={<HomePage />} />
<Route path={"/charts/:id"} exact element={<ChartsPage />} /&
浏览 1提问于2022-10-18得票数 1
回答已采纳
晚上好!
我正在创建一个反应应用程序，用户可以在不同的页面之间导航，如登录、注册、创建字符等。这个应用程序既适用于web，也适用于Android。在web应用程序中，这个重定向看起来很好，并且正确地加载了CharCreate.js文件，而安卓应用没有，而且我收到了一个未处理的承诺拒绝。
我意识到我需要在Android上以不同的方式路由页面，包括将导入从react router更改为react路由器-原生，但我继续收到此警告。如果没有发展，我就不能继续发展。
这是我的App.js文件：
import React, { useState, useEffect } from "react&#
浏览 1提问于2021-12-08得票数 0
1回答
基本上，我希望将一个参数传递给一个自定义钩子的函数，然后返回该函数，这样我就可以在另一个地方调用它。我想将某些参数传递给一个函数，而不是一个钩子，因为我在另一个函数中将对象参数格式化为该函数，并且不能在函数内部调用钩子。这是钩子的代码：
import axios from "axios";
import React from "react";
export const usePutData = () => {
const [errorCode, setErrorCode] = React.useState("");
const [
浏览 2提问于2022-03-18得票数 0
我在postsSlice里有这个
export const getPosts = createAsyncThunk(
'posts/getPosts',
async (thunkAPI)=> {
const response = await api.fetchPosts()
// const response = await fetch('http://localhost:3002/api/posts').then(
// (data) => data.json()
// )
return response.data
浏览 1提问于2022-08-14得票数 -1
回答已采纳
我从服务器上获取了一个对象，并设置为状态响应。该对象有一个由obj组成的数组，我将其拉出并设置为不同的状态变量。如果我改变了obj的状态，我把它拉出来了，改变了它原来的父obj的状态。如何防止出现这种情况，以便用户可以选择将其保存到父对象中？这就是我要做的。
const [responses, setResponses] = React.useState();
const [editedComponent, setEditedComponent] = React.useState({
name: '',
things: [],});
cons
浏览 7提问于2020-05-20得票数 0
回答已采纳
3回答
由于某些原因，当我尝试使用setItem(response.data)：Objects are not valid as react child....If you meant to render a collection of children, use an array instead.存储状态中的axios响应时，这会发送一个错误。
import Axios from 'axios'
function Menu() {
const[items,setItems]=useState([])
useEffect(async()=>{
浏览 30提问于2021-03-04得票数 0
回答已采纳
3回答
我想检索页面上的公司列表。我只是为了确认一下传入的数据，它看起来如下所示
"count": 1,
"next": null,
"previous": null,
"results": [
{
"id": "56407787-472f-44c9-b726-189798c7e217",
"address": {
"street": "test
浏览 0提问于2020-03-31得票数 0
1回答
我不确定问题出在哪里。我知道axios无法从api获得响应，但我不明白为什么。 我的nodejs后台服务器文件： import data from './data';
const app = express();
app.get("/api/products", (req, res) => {
res.send(data.products);
})
app.listen(5000, () => {console.log("Server started at http://localhost:5000")}) 我可以在lo
浏览 52提问于2020-07-12得票数 3
我有一个钩子状态，我把它设置为一个空对象，属性值要开始。如果一个属性不存在(它不是在初始化时)，那么它将调用一个API，它将添加对象属性。在我尝试将响应对象从API传递到状态钩子并收到错误之前，这个过程可以正常工作。如果我将对象包装在另一个对象中(通过花括号)，它可以工作，但是将对象嵌套在属性data下面。
为什么钩子只接受在对象中包装对象？我宁愿只使用从服务器接收到的数据对象。
这里是setUser(data)**:** 的错误消息
Error: Rendered fewer hooks than expected. This may be caused by an accidental e
浏览 1提问于2020-12-26得票数 1
1回答
为所有Api请求单独部署文件
、、、、
我有一个文件Api.js来从我使用的Api的所有(还有更多的实现)中获取数据：
import {useState} from "react";
import axios from "axios";
export const GetUsers = () => {
const [responseArray, setresponseArray] = useState([]);
axios
.get("http://localhost:8080/api/Users", {
headers: {
浏览 4提问于2022-10-16得票数 2
问题是，每次我将鼠标悬停在标记上时，都会打开或关闭一个弹出窗口，它会导致所有标记重新呈现，即使我的状态没有改变。每次我悬停在标记内和标记外时，console.log(myState);都在运行。 我试着使用useMemo钩子，但不知道如何在country.map上使用它。有什么帮助吗？ 下面是我的代码： import React, { useEffect, useState } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import axios fr
浏览 54提问于2020-03-28得票数 0
这是代码，我只是想使用axios来获取，然后将响应设置为状态。使用ES6箭头函数
import React, { Component } from 'react';
import './App.css';
import axios from 'axios';
class FieldValues extends Component {
constructor (props){
super(props);
this.state = {
todos: []
}
}
componentDidM
浏览 3提问于2017-03-16得票数 0
回答已采纳
我已经做了一个类来管理关于json令牌的所有事情，它可以工作，直到我更新了所有包。现在，我得到以下错误：
React Hook "useHistory" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks
下面是这个类的代码：
import jwt_decode from "jwt-decode";
imp
浏览 14提问于2021-07-31得票数 1
回答已采纳
3回答
反应响应获取数据
、、
我想将Axios响应的数据添加到我的useState数组中。问题是，我不知道如何从The ()函数中获取数据。基本上，我想要做的是保存Axios响应，以便我可以在我的数组中使用它。(我第一次试着做出反应)
for (var i = 1; i <= props.max; i++) {
const response = Axios.get("http://localhost:3001/content", {id: 1});
response.then((res) => {
console.log(res.data[0].title)
浏览 3提问于2022-04-13得票数 1
回答已采纳
我使用"react axios“从伪API ( )中获取数据:当我按下某个用户时，所有用户的信息都应该出现在我面前，而这个错误”未能加载资源:服务器响应的状态为404 ()“，我不知道我在做什么。
..App.js .
import React, { Component, Fragment } from 'react'
import { BrowserRouter, Routes, Route, NavLink} from 'react-router-dom'
import './App.css';
import Home from &#
浏览 17提问于2022-01-17得票数 0
我使用axios从API检索数据，并试图将数据保存在一个处于组件状态的数组中的变量中，但是当我这样做时，我得到了错误：
Objects are not valid as a React child (found: object with keys If you meant to render a collection of children, use an array instead.
我试着在线查看并将对象转换为数组，但到目前为止没有任何进展。以下是我所做的努力：
import React, { useState, useEffect, Component } from 'react
浏览 3提问于2019-11-09得票数 0
回答已采纳
因此，当我想在React中对数组中的元素进行排序时，我遇到了一个问题。 问题不在于排序逻辑，而在于React本身，所以每当我想要单击一个按钮时，它就会显示 ‘按难度排序’ 它不起作用。但是，当我单击一个 “隐藏” 按钮，同时元素在DOM中按照我想要的方式进行更新。 是什么导致了这个问题，如何解决它？谢谢 编辑:代码沙箱链接 https://codesandbox.io/s/tender-rubin-1nq0r import React, { useState, useEffect } from 'react';
// import { ListProvider } fro
浏览 46提问于2021-03-01得票数 1
回答已采纳
1回答
见Zac在下面的解决方案
这部分代码不是渲染的，有人能帮帮我吗？注释react变量是一个数组，设置如下：
0: {comment: {…}, subcomments: Array(0)}
1: {comment: {…}, subcomments: Array(0)}
2: {comment: {…}, subcomments: Array(0)}
3: {comment: {…}, subcomments: Array(0)}
4: {comment: {…}, subcomments: Array(0)}
5: {comment: {…}, subcomments: Array(0)}
6
浏览 1提问于2021-06-13得票数 0
回答已采纳
我从Node发送数据来在数组对象中响应JS。在response中，当我设置响应数据时，我得到了一个错误：“对象作为一个are子对象无效(找到:带有键{eventName、eventDate、商船}的对象)。如果您打算呈现一个子集合，那么使用一个数组代替。”
我检查了一个堆栈溢出帖子。我也以同样的方式设置值，但我得到了错误。
下面是我从Node发送的数据。
[
{
eventName: 'Sankranti',
eventDate: 2021-01-21T00:00:00.000Z,
merchantid: 'tp012345'
}
浏览 1提问于2021-01-19得票数 1
回答已采纳
我已经开发了一个从openweathermap.org获取天气数据的应用程序。该应用程序是使用redux和redux-saga构建的。现在我必须使用"Unstated“而不是Redux来重做状态管理。 WeatherContainer.js类处理状态： class WeatherContainer extends Container {
state = { weather: [] };
setWeatherData = (weather) => {
this.setState({ ...this.state, weather });
};
} 从API端点获
浏览 12提问于2021-01-04得票数 0
回答已采纳
从api中获取/Vehicles后，我想在组件中显示它们，但是在useFetch函数中，我可以console.log res.data，但是在卡车组件中，我不能映射卡车。
我的自定义useFetch函数：
import { useState, useEffect } from 'react';
import axios from 'axios';
const useFetch = (url) => {
const api = axios.create({
baseURL: 'api url',
headers: { A
浏览 2提问于2021-02-26得票数 0
回答已采纳
我在react中有数组对象，当我在React中硬编码数据并执行它时，它是工作的，从Node发送的数据和它没有显示的React中的数据是相同的。
请查看代码框链接，我的代码工作。
import React,{useState} from "react";
import ReactDOM from "react-dom";
import { Carousel } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.css";
import "./style
浏览 3提问于2021-01-19得票数 1
回答已采纳
我的目标是使用上下文API最终创建添加购物车功能。为了做到这一点，我需要从我的数据库中获取产品并将其存储在一个数组中。
目前，我面临的挑战是如何从axios响应中检索数据，并将其存储在将在const组件中传递的变量中。显然，问题是在Axios响应完成之前，变量被传递给子变量。
我尝试使用await关键字，但在async函数中出现了一个错误。因此，我试着插入async关键字，但这不起作用，因为它会产生错误。
我能够成功地从类组件中的axios中检索数据，但是在这些const中我无法这样做。
这是我的代码：
Context.js
import { createContext, useCont
浏览 4提问于2022-01-31得票数 0
回答已采纳
我有API从zoho库存中获得完整的图像URL。但是，当我试图使用axios在本机反应中运行它时，它将数据null显示为API响应。我试过邮递员的时候，效果很好。下面显示我使用过的API。
因此，我的问题是如何在react本地获取完整的图像url？
浏览 6提问于2021-09-17得票数 0
我有一个带有上下文和钩子的模块化的React文件，在成功发出axios请求以存储结果JSON值之后，我希望能够访问这些文件。我认为只需导入这个函数，然后传递结果的JSON blob就可以更新钩子状态，但它似乎以不适当的方式调用它。我找不到与我的用例相匹配的文档，我想知道这个设置有什么问题，以及应该如何正确地执行。
这里是错误：
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the followi
浏览 0提问于2020-12-24得票数 0
回答已采纳
我正在尝试将remove.bg API集成到一个react本地应用程序中。但是，我不知道如何从react本机按钮调用节点js文件。如果我能澄清什么，请告诉我。谢谢你的响应！
响应包含remove.bg代码的本机JS代码：
global.Buffer = global.Buffer || require('buffer').Buffer
const axios = require('axios');
const FormData = require('form-data');
const fs = require('fs');
co
浏览 10提问于2022-12-03得票数 -1
我已经想了好几个小时了。我目前正在尝试学习如何使用Node/Express后端来响应本地开发。我似乎无法让Axios从我在IOS设备上运行的应用程序(真正的设备)中获得对本地API的请求。
我试过添加
"infoPlist": {
"NSAppTransportSecurity": {
"NSAllowsArbitraryLoads": true,
"NSAllowsLocalNetworking": true,
"NSExceptionDomai
浏览 3提问于2022-01-20得票数 0
我对此反应很新。我目前遇到的问题是我正在使用Axios请求响应来更新我的状态变量之一。
但是，我目前面临的问题是，由于状态变量正在更新，App会重新呈现，然后再次调用Axios请求(导致一个sorta无限循环)。
如何使Get请求能够更改变量，但不会重新呈现组件并再次调用Get请求？
function App(props) {
let [sentenceData, setSentenceData] = React.useState({})
const renderEnglishSentence = useCallback(function () {
retur
浏览 7提问于2021-12-30得票数 0
回答已采纳
2回答
我正在制作一个使用API为我的应用程序提供数据的react应用程序。在我的数据库中，我在地图上有关于引脚的数据。我想在我的反应应用程序中显示这些引脚的信息，我想让他们渲染。我用axios和这个url：获取这些信息，我想用axios.get( url )从该url检索信息，对JSON数据进行字符串化，然后将其解析为一个引脚数组。
问题:在从服务器获取数据之前，将呈现页面，因为axios是异步的，因此无法显示任何内容。UseEffect和useState不能工作，因为我一开始就需要一些东西(我想)。
我已经尝试过了：我尝试使用useEffect和useState，但是正如我所说的，我认为我需要一些
浏览 2提问于2021-06-12得票数 1
回答已采纳
我正在尝试构建一个react组件，它显示一个基于API响应的随机数。但是我注意到显示的数字是无限重呈现的，当我检查服务器控制台时，它会收到来自react的无限请求。如何解决这个问题？我使用react状态来显示数字。
API randomnumber.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function (req, res, next) {
let randomNumber = Ma
浏览 4提问于2022-10-31得票数 0
1回答
axios响应未填充
、、、
我正在制作在Youtube上搜索的react应用程序，并使用create-react-app显示一些视频列表。我的问题是来自axios.get()的响应文档只包含脚本和空的框架标记。我想这里面有一些内容，如当从浏览器打开。为什么会发生这种情况？我应该学些什么？
import React from "react";
import SearchBar from "./SearchBar";
import axios from "axios";
class App extends React.Component {
onSubmitFormSea
浏览 2提问于2020-05-28得票数 0
2回答
在这段代码中，每当我试图指向/dashboard时，它都不会等待axios的响应，而是立即转到返回部件，它使用loggedin和它的默认值，这里是undefined。我想我应该用承诺但我不知道怎么..。所以如果有人能帮忙我会很感激的。
import axios from 'axios';
import React, { useEffect, useRef, useState } from 'react';
import { Redirect } from 'react-router';
import OverallCondition from &
浏览 8提问于2021-08-26得票数 0
1回答
我正在学习ReactTs，我正在编写一个简单的两个组件的应用程序来上传文件，并通过另一个请求获取上传进度，但我无法从请求中接收进度数据。我认为useEffect从不执行axios get请求。如何多次执行get请求才能获得0-100的进度？谢谢你的帮忙!
主成分：
import axios from 'axios';
import React, { Fragment, useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux'
浏览 8提问于2021-05-13得票数 1
回答已采纳
我目前正在开发一个API调用，它的工作方式与Postman中的预期完全相同，但是当在前端浏览器上进行相同的调用时，它不会返回相同的数据。堆栈是MERN。 其中非常有趣的部分是Axios请求每次都返回不同的数据数组。为了帮助解释这一点，出于测试目的，数据库在进行调用时只返回4条消息。在Postman中，每次都会返回所有4条消息。但是使用React-Redux时，Axios调用有时会返回2条消息，有时会返回3条消息，但永远不会像预期的那样返回完整的4条消息。 编辑:看起来这是一个useEffect问题，我创建了一个按钮，它调用相同的接口请求，并返回所有4条消息。其他人有过这个问题吗？ 下面是AP
浏览 58提问于2021-07-26得票数 0
我试图在我的axiosConfig文件中实现一个locale参数：
import axios from "axios";
const instance = axios.create({
baseURL: "http://10.0.2.2:8000/api",
timeout: 2000,
});
instance.defaults.headers.common["locale"] = "en";
export default instance;
在每个屏幕上，我都会在屏幕上发出get和post调用：
axiosCon
浏览 1提问于2022-06-04得票数 2
回答已采纳
1回答
你好，我有一个从对象中获取对象的数据
数据
{
"test1": {
"success": true,
"mmr": 1627,
"name": "Choo",
"next_claim": 1639454954
},
"test2": {
"success": true,
"mmr": 1246,
"name": "Dee",
"
浏览 1提问于2021-12-05得票数 -1
我正在接收使用axios的get请求的50个数据，我想添加分页到我的代码在每一页上我想要5个结果，如何实现分页与axios响应。
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`ht
浏览 4提问于2018-09-28得票数 0
回答已采纳
1回答
我知道函数不能调用钩子，只能响应功能组件，这有点不同。
我已经创建了一些需要使用钩子的实用程序/服务类型函数。
// somewhere in services files...
const utilNavTo = (route) => {
const navigate = useNavigate();
...
};
// somewhere in components for screens...
const MyScreen = () => {
...
if(something){
utilNavTo('/somewhere&#
浏览 10提问于2022-05-14得票数 1
回答已采纳
我想将存储在const mappedData中的数据从FetchDataComponent.js传递给ReactSelectComponent.js。有什么方法可以用功能组件做到这一点吗？在下面的代码中我得到了Error: Objects are not valid as a React child
FetchDataComponent.js
import React,{useState, useEffect} from "react";
import axios from "axios";
import _ from "lodash";
co
浏览 3提问于2020-05-04得票数 0
回答已采纳
1回答
我试图让我的privateRoute等待我的API调用。若要确定用户是否联机并允许访问该页，请执行以下操作。但是我得到了以下错误：
错误：
Error: PrivateRoute(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
我想它不是等待一个响应来呈现，因为我在等待我的服务器。我怎么才能解决这个问题呢？
我这样称呼它：
服务器响应私有：
import React from 'rea
浏览 1提问于2020-08-30得票数 1
回答已采纳
我试图使用从fetchData钩子获取数据，但奇怪的是，它会产生以下错误->
Line 26:31: React Hook "useReducer" is called in function "fetchData" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Line 28:5: React Hook "useEffect" is called in functi
浏览 10提问于2020-07-21得票数 1
回答已采纳
我对原生反应是全新的，我不知道这是不是正确的方式。我使用的是@react-native-community/checkbox的checkbox组件。我正在从API获取一组服务。在该APi中，默认情况下我将获取isCheked = false。当我点击复选框时，它工作正常，而当我取消复选时，它就不工作了。我不知道我错在哪里。 import React, {useState, useEffect} from 'react';
import {Text, View, Picker, ScrollView, TouchableOpacity} from 'react-nati
浏览 24提问于2021-03-19得票数 1
回答已采纳
我试图使用对数据库的反应来发布数据，但是当我选择从axios获取的选项时，我得到了一个错误state.users是不定义的，我也收到了一个警告：
警告：组件正在将受控输入更改为不受控制。这很可能是由定义的值更改为未定义的值引起的，这种情况不应该发生。
import React, { useState, useEffect, useRef } from "react";
import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";
import DatePicker from "reac
浏览 1提问于2020-11-28得票数 0
回答已采纳
2回答
为什么我不能通过数组映射
、、、
我想映射一个数组，但是我得到了一个错误: TypeError: locationAddress.map不是一个函数
我是新来的反应和反应钩子。我一直试图简化数组，但没有运气。你知道为什么这不管用吗？
编辑:到目前为止，我尝试了答案中的所有更改，但是错误仍然存在。我包含了更多的代码和package.json文件。我试着去激活一些函数，比如useEffect，现在这个错误只显示在我试图键入正在被映射的输入字段时。
找到了解决方案：
const [locationAddress, setLocationAddress] =
useReducer(
(state, newState) =&g
浏览 6提问于2019-12-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
