我如何在 React with Promises 中将密钥添加到我的 div 标签
how can i add key to my div tag in React with Promises
我是 React js 的新手并在其上制作了一个小项目,我想将密钥添加到我的 div。如何为每张图片添加密钥?
class Image extends Component {
constructor() {
super();
this.state = { images: [] };
}
componentDidMount() {
let promise = apiGateway.getImages();
if (promise != null) {
promise.then((value) => {
Promise.all(value).then((images) => {
this.setState({ images: images});
});
});
}
}
renderimage(value){
return(
<div key={}>
<img className='image' src={value.data} width='100' height='100' alt='nature'/>
</div>
);
}
render() {
return(
<div>
<div>{
this.state.images.map((image)=>{
return this.renderimage(image);
})
}
</div>
</div>
);
}
}
export default Image;
只需添加 get index from map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
class Image extends Component {
constructor () {
super()
this.state = { images: [] }
}
componentDidMount () {
let promise = apiGateway.getImages()
if (promise != null) {
promise.then((value) => {
Promise.all(value).then((images) => {
this.setState({ images: images})
})
})
}
}
renderimage (value, key) {
return (
<div key={key}>
<img className='image' src={value.data} width='100' height='100' alt='nature' />
</div>
)
}
render () {
return (
<div>
<div>{this.state.images.map((image, key) => {
return this.renderimage(image, key)
})}
</div>
</div>
)
}
}
export default Image
class Image extends Component {
constructor() {
super();
if undefined == window.last_image_key {
window.last_image_key = 1;
} else {
window.last_image_key = window.last_image_key + 1;
}
this.state = { images: [], image_key: window.last_image_key };
}
imageKey() {
return this.state.image_key
}
renderimage(value){
return(
<div key={imageKey()}>
<img className='image' src={value.data} width='100' height='100' alt='nature'/>
</div>
);
}
...
}
我是 React js 的新手并在其上制作了一个小项目,我想将密钥添加到我的 div。如何为每张图片添加密钥?
class Image extends Component {
constructor() {
super();
this.state = { images: [] };
}
componentDidMount() {
let promise = apiGateway.getImages();
if (promise != null) {
promise.then((value) => {
Promise.all(value).then((images) => {
this.setState({ images: images});
});
});
}
}
renderimage(value){
return(
<div key={}>
<img className='image' src={value.data} width='100' height='100' alt='nature'/>
</div>
);
}
render() {
return(
<div>
<div>{
this.state.images.map((image)=>{
return this.renderimage(image);
})
}
</div>
</div>
);
}
}
export default Image;
只需添加 get index from map
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
class Image extends Component {
constructor () {
super()
this.state = { images: [] }
}
componentDidMount () {
let promise = apiGateway.getImages()
if (promise != null) {
promise.then((value) => {
Promise.all(value).then((images) => {
this.setState({ images: images})
})
})
}
}
renderimage (value, key) {
return (
<div key={key}>
<img className='image' src={value.data} width='100' height='100' alt='nature' />
</div>
)
}
render () {
return (
<div>
<div>{this.state.images.map((image, key) => {
return this.renderimage(image, key)
})}
</div>
</div>
)
}
}
export default Image
class Image extends Component {
constructor() {
super();
if undefined == window.last_image_key {
window.last_image_key = 1;
} else {
window.last_image_key = window.last_image_key + 1;
}
this.state = { images: [], image_key: window.last_image_key };
}
imageKey() {
return this.state.image_key
}
renderimage(value){
return(
<div key={imageKey()}>
<img className='image' src={value.data} width='100' height='100' alt='nature'/>
</div>
);
}
...
}