reactjs - 使用数组映射时的无限循环
问题描述
自从我添加
const dataList = dataSet.map(element => {
return <div>{element}</div>;
});
它进入了一个无限循环,但这条线也是我的程序显示注释所必需的,我该怎么办?
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;
解决方案
我想你忘了在第二个参数中传递数组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
如果某些值在重新渲染之间没有改变,你可以告诉 React 跳过应用效果。
因此,如果您想在渲染后只请求一次获取数据,您只需在useEffect
.
在这里阅读更多。
推荐阅读
- ignite - Apache Ignite 中是否有任何功能,我们可以从客户端传递表达式以在集群内执行
- javascript - 令牌认证 - JWT
- image - 如何在 QT 中的 QgraphicsView 中保持图像原始
- azure - 创建从 6:00 到 20:00 运行的 ADF 计划
- amazon-web-services - AWS API Gateway 将请求转发到带有私有证书的 HTTPS 服务器
- r - R - 防止聚合函数将日期时区转换为本地时间?
- javascript - 在哪里捕获“WebSocket 已处于 CLOSING 或 CLOSED 状态”。信息
- node.js - 在nexmo中从浏览器传递自定义数据以回答应用内语音呼叫中的url
- google-sheets - 以秒和 1/10 秒为单位显示 2 个时间戳之间的差异
- python - python单链表不能正常工作