javascript - 数据未在道具中传递给子组件
问题描述
我已使用扩展运算符将来自 api(在 Heroku 服务器中提供)的数据作为道具传递给子组件。数据不会在 ui 中呈现。虽然没有任何错误显示。我不确定是什么问题。
我的 ContactCards.js
function ContactCards() {
const[contacts, setContacts] = useState([])
useEffect(() => {
axios.get('https://texas-crm1.herokuapp.com/api/contactinfo')
.then (res =>{
console.log(res.data[0])
let data = res.data[0];
// setContacts (res.data[0])
setContacts(contacts => {
return[
{
thumbnail: clock,
title: "Opening Times",
data1: contacts.open_hour,
data2: contacts.close_hour,
},
{
thumbnail: telephone,
title: "Phone",
data1: contacts.phone_1,
data2: contacts.phone_2,
},
{
thumbnail: location,
title: "Location",
data1: contacts.street_name,
data2: contacts.city + ", " + contacts.state + ", " + contacts.country,
},
]
});
})
.catch(err =>{
console.log(err)
})
},[])
return (
<div>
<div className="contact-cards">
{contacts.map((contact) => {
return <ContactCard {...contact} />;
})}
</div>
</div>
);
}
export default ContactCards;
在这里,我使用 ...contact 作为传播运算符作为道具。
我的 ContactCard.js
function ContactCard(props) {
const {thumbnail,title,data1,data2} = props;
return (
<div className="contact-card">
<div className="container">
<div className="thumbnail">
<img src={props.thumbnail} alt={props.thumbnail} />
</div>
<div className="title">{props.title}</div>
<div className="data">{props.data2}</div>
<div className="data">{props.data2}</div>
</div>
</div>
)
}
export default ContactCard;
在这里,我将 props 定义为 const 并定义了里面的所有 props。这里只渲染缩略图,没有其他数据。thumbnail 和 title 是静态数据,而 data1 和 data2 来自 api。希望我已经解释得很好。
在上图中,缩略图显示在 data2 上,未定义显示。前两个缩略图中的其他数据为空。
解决方案
尝试直接传递你的道具,而不是将它们传播到组件。如果数据可用,则渲染它们。
编辑:由于您已将联系人预定义为空数组,因此您必须检查其长度。
return (
<div>
<div className="contact-cards">
{contacts.length > 0 && contacts.map(
({thumbnail, title, data1, data2}) =>
<ContactCard thumbnail={thumbnail} title={title} data1={data1} data2={data2} />;
)}
</div>
</div>
);
至于 ContactCard 组件,这不是问题,但为了学习,您也可以访问这样的道具。使代码更具可读性。
function ContactCard({thumbnail,title,data1,data2}) {
return (
<div className="contact-card">
<div className="container">
<div className="thumbnail">
<img src={thumbnail} alt={thumbnail} />
</div>
<div className="title">{title}</div>
<div className="data">{data2}</div>
<div className="data">{data2}</div>
</div>
</div>
)
}
推荐阅读
- angular - 我们是否可以在 Angular 的 app.component.spec.ts 文件中使用两个 beforeeach 语句?
- css - 如何在 Angular 中获得响应式 Mat-dialog Box,当我将位置更改为右下角时,响应式会熄灭
- javascript - V-text-field 自动完成值不设置 v-model 值
- python - WebDriverException:消息:未知错误:找不到 Chrome 二进制文件
- javascript - vue 单元测试触发器('click')没有触发
- php - 图像不显示在 laravel 8
- html - 如何使文本远离圆圈我尝试填充和边距但没有用
- python - 带参数的自定义类型提示
- jenkins - 在 Windows 上的 Jenkins 中记录 Java Xlint 警告时出错
- mysql - (Laravel)连接到 docker 数据库时出现问题 SQLSTATE[HY000] [2002] 连接被拒绝