javascript - 当 API 在控制台中填充但无法在前端填充时，可能是什么原因？

问题描述

我是新来的反应，并试图遵循各种教程，但我被困在这一点上，只是确定一些愚蠢的事情只是原因。我无法让数据显示在前端。我的 API 在 Postman 上运行良好，并且是 Django Rest Framework 制作的。数据填充到控制台。下面是代码 1.Note.js 2. App 发布的 Notes 3. App.js 4. Note Model ：

import React from 'react';
import { Box, Flex } from '@chakra-ui/core';
import NoteDetail from './NoteDetail';

export default function Note({ note }) {
  return (
    <Flex
      align="center"
      justify="flex-end"
      direction="column"
      bg="teal"
      width="300px"
      height="300px"
      borderRadius="40px"
      margin="16px"
      padding="16px"
    >
      <Box as="button" size="144px" bg="white" color="teal" textAlign="center" isTruncated>
        {note.title}
        <Box as="span">{note.display_name}</Box>
        <NoteDetail note={note} key={note.pk} />
      </Box>
    </Flex>
  );
}

import React, { useState, useEffect } from 'react';
import { Flex } from '@chakra-ui/core';
import axios from 'axios';
import Error from './Error';
import Loading from './Loading';
import Note from './Note';

export default function AllPublishedNotes() {
  const [data, setData] = useState([]);
  const [isError, setIsError] = useState(false);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const allPublished = async () => {
      setIsError(false);
      setIsLoading(true);
      try {
        const result = await axios.get('http://localhost:8000/api/note/published_notes/');
        setData(result.data);
        console.log(result.data);
      } catch (error) {
        setIsLoading(false);
        setIsError(true);
      }
    };
    allPublished();
  }, []);

  const noData = !data;

  return (
    <>
      <Flex
        justify="center"
        align="center"
        flexWrap="wrap"
        flexDirection={noData ? 'column' : 'row'}
        margin="16px"
        padding="16px"
      >
        {isLoading && !isError ? (
          <Loading />
        ) : isError ? (
          <Error />
        ) : (
          data.map((note) => <Note key={note.pk} note={note} />)
        )}
      </Flex>
    </>
  );
}

import React from 'react';
import { ThemeProvider, CSSReset, theme } from '@chakra-ui/core';
import AllPublishedNotes from './component/AllPublishedNotes';

export default function App() {
  return (
    <>
      <ThemeProvider theme={theme}>
        <CSSReset />
        <AllPublishedNotes />
      </ThemeProvider>
    </>
  );
}

from django.db import models
from django.conf import settings


class Note(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField(max_length=500)
    author = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE )
    is_published = models.BooleanField(default=False)
    date_created = models.DateTimeField(auto_now_add=True)
    date_published = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

请有人帮忙看看可能是什么问题。没必要你使用 Chakra 只需要知道我的反应代码本身出了什么问题

标签： javascriptreactjsdjango

javascript - 当 API 在控制台中填充但无法在前端填充时，可能是什么原因？

问题描述

解决方案

推荐阅读