javascript - TypeError:state.map 不是函数
问题描述
import React from "react";
import { useContext, useEffect, useRef, useState } from "react";
import noteContext from "../Context/notes/NoteContext";
import Addnote from "./Addnote";
import Noteitems from "./Noteitems";
function Notes(props) {
const context = useContext(noteContext);
const { state, getnote,editnote } = context;
useEffect(() => {
getnote();
}, []);
const ref = useRef(null);
const refclose = useRef(null);
const [notes, setnotes] = useState({id:"",etitle: "",edescription:"",etag:""})
const updatenote = (cnote) => {
ref.current.click();
setnotes({id: cnote._id, etitle: cnote.title, edescription: cnote.description, etag: cnote.tag})
};
//Define clickupdate
const clickupdate=(event)=>{
console.log("updatting note",notes)
refclose.current.click();
editnote(notes.id,notes.etitle,notes.edescription,notes.etag)
event.preventDefault();
props.showAlert("Updated Successfully","success");
}
//Define liveconsole
const liveconsole=(event)=>{
setnotes({...notes, [event.target.name]: event.target.value})
}
return (
<>
<Addnote showAlert={props.showAlert} />
<button
ref={ref}
type="button"
class="btn btn-primary d-none" //D-none for set display to none
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch demo modal
</button>
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">
Update Your Note
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<form className="my-3">
<div class="form-group" className="my-3">
<label htmlfor="title">Title</label>
<input
type="text"
class="form-control"
id="etitle"
name="etitle"
aria-describedby="emailHelp"
placeholder="Enter Note Title"
value={notes.etitle}
minLength={5}
required
onChange={liveconsole}
/>
</div>
<div class="form-group" className="my-3">
<label htmlfor="description">Description</label>
<input
type="text"
class="form-control"
id="edescription"
name="edescription"
placeholder="Note description"
value={notes.edescription}
minLength={5}
required
onChange={liveconsole}
/>
</div>
<div class="form-group" className="my-3">
<label htmlfor="tag">Tag</label>
<input
type="text"
class="form-control"
id="etag"
name="etag"
placeholder="Note Tag"
value={notes.etag}
minLength={2}
required
onChange={liveconsole}
/>
</div>
</form>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
ref={refclose}
>
Discard
</button>
<button disabled={notes.etitle.length<5 || notes.edescription.length<5 || notes.etag.length<2} type="button" class="btn btn-primary" onClick={clickupdate}>
Update Note
</button>
</div>
</div>
</div>
</div>
<div className="row">
<h1>Preview your Note</h1>
<div className="container mx-2">
{state.length===0 && "No Notes to Display. Please Add some"}
</div>
{state.map((note) => {
return (
<Noteitems key={note._id} updatenote={updatenote} showAlert={props.showAlert} note={note} />
);
})}
</div>
</>
);
}
export default Notes;
//This problem occured after i set my authtoken like this in another file...
//Edit a Note
const editnote=async (id, title, description, tag )=>{
//Api calls
const response=await fetch(`${host}/api/note/updatenote/${id}`,{
method:"PUT",
headers:{
"auth-token":localStorage.getItem('token'),
"content-Type":"application/json"
},
body: JSON.stringify({title, description, tag})
})
const json=response.json()
console.log(json)
在以这种格式保存 authtoken 之前,我对 authtoken 进行了硬编码。
错误:
TypeError: state.map is not a function
解决方案
我认为,
{state.map((note) => {
return (
<Noteitems key={note._id} updatenote={updatenote} showAlert={props.showAlert} note={note} />
)
})}
在定义之前运行state
。为确保您.map()
仅在有状态时渲染,您可以执行以下操作:
{state && state.map((note) => {
return (
<Noteitems key={note._id} updatenote={updatenote} showAlert={props.showAlert} note={note} />
)
})}
推荐阅读
- c# - Microsoft Authenticator 是否需要 Azure AD?
- java - 将 webelement 转换为字符串 Selenium
- sql - SQL Server:将多个度量列聚合为 1 列
- mysql - Selecting strings from a column where some are utf8 encoded and others are not
- matplotlib - 在 PyCharm 中使用 matplotlib 时,Sympy 不打印方程
- amazon-web-services - 中国的 Firebase 迁移
- laravel - 为什么 Laravel 会截断数据库中的大文本
- swift - Does Swift Foundation's UUID incorporate the time by default?
- r - R中的“电梯图” - 绘制流入和流出
- java - Implement JPA request with JOIN