[英]react js : the map function didn't work inside a function
我有一个迷你 tp,我想映射一个对象数组,我发现函数映射没有工作的问题,在这个 tp 中我有函数App()
使用函数Ptot()
映射数组具有函数Prot()
的对象
问题: `
Uncaught TypeError: data.map is not a function
at Ptot (Ptot.js:9:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
`
应用程序.js:
import React from "react";
import Ptot from "./Ptot";
const Produits=[
{
id:1,
title:"pc pourtable hp",
prix:'7490',
image:""
},
{
id:2,
title:"pc pourtable delet",
prix:'8990',
image:""
},
{
id:1,
title:"pc pourtable infnx",
prix:'6590',
image:""
}
];
function App(){
return(
<div>
hello
<Ptot props={Produits} />
</div>
)
}
export default App;
Prot.js:
import React from "react";
function Prot(element) {
return (
<div>
<p>hello</p>
<div>
<div className="col">
<div className="cart-shadow-sm">
<img className="bd-placeholder-img card-img-top" src={`image/${element.image}`} alt="" />
<div className="card-body">
<p className="card-title">{element.title}</p>
<p className="card-text">{element.prix}</p>
<div className="d-flex justify-conten-between align-items-center">
<div className="btn-group">
<button type="button" className="btn btn-sm btn-outline-secondary">Ajoute un paner</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default Prot;
ptot.js:
import React from "react";
import Prot from './Prot.js'
import { useState } from "react";
function Ptot(props){
const [data,setData]=useState(props)
return (
<div className="container">
<div >
{
data.map((elm)=>{
<Prot element={elm} />
})
}
</div>
</div>
)
}
export default Ptot;
组件的props
是一个对象。 不要将props
属性称为props
,将其称为其他名称,例如data
:
<Ptot data={Produits} />
然后从组件 props 对象中解构data
,并map
到它上面。
function Ptot({ data }) { ... }
当你渲染一个 React 组件时,所有的 props 都会作为一个参数(通常称为props
)传递到组件函数中。
所以当你有这个
<Ptot props={Produits} />
在你的Ptot
函数里面,其实是这样传入的
function Ptot (props) {
console.log(props);
// { props: […] }
console.log(props.props);
// [{ id: 1, …}, …]
}
所以你想要的是这样的东西
<Ptot data={Produits} />
function Ptot(props) {
return props.data.map(elm => (…));
}
尝试获取Ptot.js
中的道具作为对象字段
.
.
function Ptot({props}){
.
.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.