0

Since I added

const dataList = dataSet.map(element => {
  return <div>{element}</div>;
});

It has gone into an infinite loop but this line is also necessary for my program to display the notes so what can I do?

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import Navbar from './Navbar';

function Notes() {
  //This is just a string because we are sending just one
  //might have to make it an array at some point
  const [notes, setNote] = useState(String);

  var dataArr = [];

  const [dataSet, setDataSet] = useState([]);

  const [dataList, setDataList] = useState();

  useEffect(() => {
    console.log('Use Effect Notes.js');

    axios
      .post('/api/user/notes')
      .then(res => {
        dataArr = res.data[0].notes;
        //console.log(dataArr) ;
        console.log(dataArr);
        setDataSet(res.data[0].notes);
      })
      .catch(err => {
        console.log('it didnt work' + err);
      });

    console.log('The array that i got ');
  });

  const dataList = dataSet.map(element => {
    return <div>{element}</div>;
  });

  /*const taskList = task.map((object , index)=>{
        return <div className='row justify-content-center'>

            <h2>{object}</h2>

        </div>
    });*/

  function noteDown(event) {
    event.preventDefault();

    var newNote = {
      notes: notes,
    };

    console.log('note down ' + newNote);
    axios
      .post('/api/user/notes/add', newNote)
      .then(res => {
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  }

  function ffswork() {
    console.log('ffswork');
  }
  return (
    <div>
      <div>
        <h1> Notes </h1>
      </div>
      <form onSubmit={noteDown}>
        <input
          type="text"
          placeholder="Note"
          className="form-control"
          value={notes}
          onChange={e => {
            setNote(e.target.value);
          }}
        />
        <input type="submit" value="AddNote" className="btn btn-primary" />
      </form>
      <button className="btn btn-primary" onClick={ffswork}>
        getData
      </button>
    </div>
  );
}
export default Notes;

console log of infinite loop

1
  • Why is dataList declared twice? dataList is not even consumed in your code snippet. Commented Oct 19, 2020 at 23:54

1 Answer 1

1

I think you forgot to pass the array in the second argument from useEffect.

  useEffect(() =>{
        console.log("Use Effect Notes.js");

        axios.post('/api/user/notes' ).then(res=>{
            dataArr = res.data[0].notes ; 
            //console.log(dataArr) ;
            console.log(dataArr); 
            setDataSet(res.data[0].notes); 
           
        }).catch(err=>{
            console.log('it didnt work' + err); 
        }); 


        console.log("The array that i got ");

    }, []) // at this line

You can tell React to skip applying an effect if certain values haven’t changed between re-renders.

So, if you want to make the request to get your data just once just after render, you just need to pass an empty array in the second argument of useEffect.

Read More here.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.