Reactjs 使用数组映射时的无限循环

自从我加上

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

constdatalist=dataSet.map（元素=>{
返回{element}；
});

它进入了一个无限循环，但这一行也是我的程序显示注释所必需的，那么我能做什么呢

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;

import React，{useffect，useState}来自“React”；
从“axios”导入axios；
从“/Navbar”导入导航栏；
功能说明（）{
//这只是一个字符串，因为我们只发送一个
//可能需要在某个时候将其设置为数组
const[notes，setNote]=useState（字符串）；
var dataArr=[]；
const[dataSet，setDataSet]=useState（[]）；
const[dataList，setDataList]=useState（）；
useffect（（）=>{
log（'Use Effect Notes.js'）；
axios
.post（“/api/user/notes”）
。然后（res=>{
dataArr=res.data[0]。注释；
//console.log（dataArr）；
console.log（dataArr）；
setDataSet（res.data[0].notes）；
})
.catch（错误=>{
console.log（'它不工作'+错误）；
});
log（'我得到的数组'）；
});
const dataList=dataSet.map（元素=>{
返回{element}；
});
/*const taskList=task.map（（对象，索引）=>{
返回
{object}
});*/
函数记录（事件）{
event.preventDefault（）；
var newNote={
注：注：，
};
console.log（'note down'+newNote）；
axios
.post（'/api/user/notes/add'，newNote）
。然后（res=>{
控制台日志（res）；
})
.catch（错误=>{
控制台日志（err）；
});
}
函数ffswork（）{
console.log（'ffswork'）；
}
返回(
笔记
{
setNote（即目标值）；
}}
/>
获取数据
);
}
导出默认票据；

---

我想您忘了在

useffect

的第二个参数中传递数组

  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

如果出现某些值，可以告诉React to skip应用效果 在重新渲染之间没有更改

因此，如果您想在渲染后请求仅获取一次数据，只需在

useffect

的第二个参数中传递一个空数组

  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

---

阅读更多。

为什么要两次声明

dataList

<代码>数据列表甚至不在代码段中使用。