我可以在来自python-django的http get请求中看到一组对象，但当数据进入jsx-react时，它会被转换

Question

伙计们，我已经在Django rest框架中编写了一个rest API，一个很小的API，它工作得很好，我正在react js中编写它的前端，但问题是当我做get请求时，我可以从js中的API助手文件和调用助手文件但数据不可访问或转换为未定义的函数中看到值(对象数组(，我在下面写代码

#my env
REACT_APP_API_URL = http://192.168.43.18:8000/api/
# I know its not needed but I am trying to talk more in context

// my jsx
import React, { useEffect, useState } from "react";
import { getAllTodos as getAllTodo } from "./apis/todo-helper";
import TodoSingle from "./parts/TodoSingle";
function HomeTodo() {
const [todoList, setTodoList] = useState([]);
useEffect(() => {
try {
const data = getAllTodo();
setTodoList(data);
} catch (error) {
console.error(error);
}
}, []);
return (
<div>
{console.log(typeof todoList, "typeof todoList")}
{todoList.length > 0 &&
todoList.map((item, index) => {
console.log(item, index);
return <TodoSingle todo={item} />;
})}
</div>
);
}
export default HomeTodo;

// my helper function or just a function which calls the HTTP method
import { todoAPIs } from "./../../utils/ep";
import { get } from "../../utils/http";
export async function getAllTodos() {
try {
const data = await get(`${todoAPIs.home}`);
console.log(data.json());
return data;
} catch (error) {
console.log(error, "error in get All todos");
}
}

以及我的功能，在该功能中我正在进行获取请求

// http.js
const HTTP_METHOD = Object.freeze({
GET: "GET",
POST: "POST",
PUT: "PUT",
DELETE: "DELETE",
});
const BASE_URL = process.env.REACT_APP_API_URL;
function genericHeaders() {
const headers = {
"Content-Type": "application/json",
};
return headers;
}
export async function get(ep, include = false, headers = genericHeaders()) {
return makeRequest(ep, HTTP_METHOD.GET, null, include, headers);
}
export async function post(
ep,
body,
include = false,
headers = genericHeaders()
) {
return makeRequest(
ep,
HTTP_METHOD.POST,
JSON.stringify(body),
include,
headers
);
}
export async function put(
ep,
body,
include = false,
headers = genericHeaders()
) {
return makeRequest(
ep,
HTTP_METHOD.PUT,
JSON.stringify(body),
include,
headers
);
}
export async function del(
ep,
body,
include = false,
headers = genericHeaders()
) {
return makeRequest(
ep,
HTTP_METHOD.DELETE,
JSON.stringify(body),
include,
headers
);
}
async function makeRequest(ep, method, body, includeCredentials, headers) {
const config = {
method,
headers,
};
// Set configurations.
if (includeCredentials) config.credentials = "include";
if (body) config.body = body;
// console.log(token, 'token')
try {
const response = await fetch(BASE_URL + ep, config);
const data = await response.json();
console.info(data);
return data;
// return Object.assign([], data);
} catch (error) {
console.error(ep, body, error);
throw error;
}
}

有人能看到这个并告诉我哪里做错了吗？我试图在互联网上找到一些完全无关或无关紧要的东西，或者我无法理解的东西。。。我不认为这与的其他问题有任何重复

Answer 1

我在你的类中做了一些更改——它的代码不同，但它可以帮助你。

基本上是getAllTodos((异步函数，但您没有使用wait，这就是为什么您看不到您的值。

不要在useEffect中使用async，请在另一个函数中调用您的请求，然后在useEffect中调用它。

这是您的演示。

import React, { useEffect, useState } from 'react';
function HomeTodo() {
const [todoList, setTodoList] = useState([]);
const getAllTodos=async()=> {
try {
const data = await new Promise(resolve=> resolve([1, 2, 3]));
return data;
} catch (error) {
console.log(error, 'error in get All todos');
}
};
const loadData =async()=>{
try {
const data = await getAllTodos();
setTodoList(data);
} catch (error) {
console.error(error);
}
};
useEffect(() => {
loadData();
}, []);

return (
<div>
{console.log(typeof todoList, 'typeof todoList')}
{todoList.length > 0 &&
todoList.map((item, index) => {
console.log(item, index);
return <div key ={index + item}todo={item}>{item}</div>;
})}
</div>
);
}
export default HomeTodo;