我还没有React过来。我刚刚学会了用nodejs和mysql中的express创建api。您可以在app.subarnanto.com/api/inventory上查看json输出api。
如何渲染图像?这是我的密码。我也收到了警告
警告:数组或迭代器中的每个子级都应该有一个唯一的“key”属性
第三个问题,如何改进代码?谢谢
import React from 'react';
import axios from 'axios';
export default class Inventory extends React.Component {
constructor(props) {
super(props)
this.state = {
inventory: []
}
}
componentDidMount() {
axios.get('https://app.subarnanto.com/api/inventory').then(res => {
this.setState({ inventory: res.data });
console.log({ inventory: res.data });
});
}
render() {
return this.state.inventory.map(itemList => {
let item = itemList;
return (
<div>
<h4>Nama: { item.name } </h4>
<h4>Nomor Seri: { item.serial } </h4>
<h4>ID Tag: { item.tag } </h4>
<img src="{ item.image }"/>
</div>
);
})
}
}
4条答案
按热度按时间2q5ifsrm1#
使用潜水标签的钥匙。请在react docs中阅读更多信息。
选择键的最佳方法是使用一个字符串来唯一地标识同级列表项。通常,您会使用数据中的ID作为键:
react docs不建议将索引作为键更多地放在这里
f2uvfpb92#
将图像源从“{item.image}”更改为src={item.image}作为字符串。
代码:
警告-数组中的每个子级都应具有唯一的“键”属性:
react使用键prop来理解组件与dom元素的关系。
yrwegjxp3#
您对src属性使用了不适当的语法。您应该从src中删除引号:此外,数组中的每个子级都应该有一个唯一的标识符键。在您的情况下,最好使用:
<div key={ item.serial }>
工作示例:j0pj023g4#
要渲染图像,只需从中删除双引号
img
标签。通过添加
key
属性设置为返回列表的每个元素。这种方法可以处理最小的dom更改。react文档中有更多信息。