1

enter image description hereI am new to react and have tried to following various tutorials however i am stuck at this point and just sure something silly is just the cause. I can't get the data to display in frontend. My API works fine on Postman and is Django Rest Framework- made. The data populates to console. Below is the code 1.Note.js 2. App published 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

Somebody please help look through what the issue could be. Not necessary you use Chakra just need to know what went wrong with my react code itself

Mario Petrovic
  • 7,500
  • 14
  • 42
  • 62
user14568829
  • 11
  • 2

2 Answers2

0

by the answer here you can debug it by opening django/apps/registry.py and around line 80
raise RuntimeError("populate() isn't reentrant")
replace with:
self.app_configs = {}

BeryCZ
  • 137
  • 4
0

I have updated the code. Please try the following code.

axios.get(`http://localhost:8000/api/note/published_notes`)
      .then(res => {
        console.log(res);
      })
K.Raj.
  • 643
  • 6
  • 22