[英]How to fix Data.map is not a function in Reactjs?
So I have a Notesdata array containing object with properties title, tagline, description.所以我有一个 Notesdata 数组,其中包含 object 和属性标题、标语、描述。 Notesdata array is stored in the "data" state variable in the App component and I am sending this data state variable to notes view component to populate on the UI but when I am appending a new object inside the data state variable and then sending it to notesview component, I am getting the error "Data.map is not a function".
Notesdata array is stored in the "data" state variable in the App component and I am sending this data state variable to notes view component to populate on the UI but when I am appending a new object inside the data state variable and then sending it to notesview 组件,我收到错误“Data.map 不是函数”。
When I am printing the "data" state variable I am getting an array but when I am checking its type it's showing "object", I am confused in why it is showing like that.当我打印“数据”state 变量时,我得到一个数组,但是当我检查它的类型时,它显示的是“对象”,我很困惑为什么它会这样显示。
I also tried using Array.from() on the "data" state variable before passing it to notesview but that is also showing the same error.我还尝试在“数据”state 变量上使用 Array.from(),然后再将其传递给 notesview,但这也显示了相同的错误。
------------App component------------------ ------------应用组件------
import React, { useState } from "react";
import './App.css';
import Input from './Components/Input';
import Navbar from './Components/Navbar';
import Notesview from './Components/Notesview';
import Notesdata from "./Data/Notesdata";
function App() {
// const [data, setdata] = useState(Notesdata);
const [data, setData] = useState(Notesdata);
function handleDelete(id) {
let newData = data.filter((item) => item.id !== id)
setData(newData)
}
function handlePost(value) {
let newval = data.push(value)
setData(newval)
console.log(typeof data)
console.log(data)
}
return (
<div className="App">
<header className="App-header">
<Navbar />
<Input data={data} handlePost={(value) => handlePost(value)} />
<Notesview handleDelete={handleDelete} Data={data} />
</header>
</div>
);
}
export default App;
-----------------notesview component----------------------- -----------------notesview 组件---------------------
import React from 'react'
import Notescard from './Notescard'
import "../Styles/Notes.css"
const Notesview = ({ Data, handleDelete }) => {
return (
<>
<div className='notes'>
{
Data.map((item) => { // here is the Data.map where the error is coming
return <Notescard item={item} handleDelete={handleDelete} />
})
}
</div>
</>
)
}
export default Notesview
You get this error because Data is null
.您会收到此错误,因为 Data 是
null
。 you can check Data
's existence before trying to map on it in Notesview
like this:您可以在尝试在 Notesview 中对其进行
Notesview
之前检查Data
的存在,如下所示:
Data && Data.map(...)
There's a lot wrong right here:这里有很多错误:
let newval = data.push(value)
setData(newval)
console.log(typeof data)
console.log(data)
Array.prototype.push
returns the length of the array, so you're setting data
to a number . Array.prototype.push
返回数组的长度,因此您将data
设置为number 。 (Which, incidentally, does not have a .map()
function.) .map()
function。)data
) before trying to update it.data
)之前对其进行变异。 Just update it. To update the state correctly, you'd do something more like this:要正确更新 state,您需要执行以下操作:
setData([...data, value]);
If you might have a batch of updates and you want each state update to use the updating state in the batch rather than the current state in the render, you could use the callback version of the state setter: If you might have a batch of updates and you want each state update to use the updating state in the batch rather than the current state in the render, you could use the callback version of the state setter:
setData(d => [...d, value]);
This creates a new array reference, which includes all of the elements in the data
array as well as the new value
element, and sets that reference as the updated state.这将创建一个新的数组引用,其中包括
data
数组中的所有元素以及新的value
元素,并将该引用设置为更新的 state。 Without mutating the current state for the current render.不改变当前渲染的当前 state。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.