React js 无法读取 API 调用属性的未定义属性'id'

Question

我正在开发一个React应用程序，该应用程序搜索并显示我使用Pixabay API搜索的主题的图片和视频。然而，我遇到了"；无法读取未定义的"的属性"id"；当我试图调用我获取的API调用的id时。我能做些什么来修复这个错误？

API调用：(7( [｛…｝，｛……｝0:{id:801826，pageURL:"；https://pixabay.com/photos/pug-dog-pet-animal-puppy-cute-801826/"，类型："；照片"；，标签："；pug，dog，pet"；，预览URL:"；https://cdn.pixabay.com/photo/2015/06/08/15/02/pug-801826_150.jpg"，…｝。。。

App.js

import './App.css';
import React from 'react';
import Board from './board/board';
import ImageSearch from './imageSearch/imageSearch'
const API_KEY = "19435337-59a77b980b37e8c813d079adb"

class App extends React.Component {
state = {
images: []
}
handleGetRequest = async (event) => {
event.preventDefault();
const searchValue = event.target.elements.searchValue.value;
const URL = `https://pixabay.com/api/?key=${API_KEY}&q=${searchValue}&image_type=photo&per_page=7`

const request = await fetch(URL);
const response = await request.json();
this.setState({ images : response.hits });
console.log (this.state.images)
}
render() {
return (
<div>
<ImageSearch handleGetRequest={this.handleGetRequest}/>
<Board image={this.state.images[0]} />
</div>
)
}

}
export default App;

Board.js

import './board.css';
import React from 'react';

const Board = (image) => {
return ( 
<div>
<div key={image.image.id}>
<input type="image" className="board__image" src={image.image.largeImageURL} alt={image.image.tags}></input>
</div>
</div>      
)
}
export default Board;

Answer 1

在API调用完成之前，结果不存在。在Board组件中呈现标记之前，您需要检查它是否存在：

const Board = (image) => {
return (
<> 
{ image && <div>
<div key={image.image.id}>
<input type="image" className="board__image" src={image.image.largeImageURL} alt={image.image.tags}></input>
</div>
</div> }    
</> 
)
}

或者任何其他确保图像存在的解决方案都应该有效。