在没有实际图像位置的帖子中渲染占位符图像

Question

这是我目前拥有的代码-它显示来自reddit子网站的帖子-当我在react中运行代码时，有一些帖子由于没有数据而没有渲染图像对于缩略图-我想渲染一个缩略图占位符图像-我想我需要制作另一个组件并调用它？但我不确定

import React from "react";
import "./App.css";
function App() {
const [searchTerm, setSearchTerm] = React.useState("");
const [checked, setChecked] = React.useState(false);
const [posts, setPosts] = React.useState([]);
React.useEffect(() => {
fetch("https://www.reddit.com/r/popular.json")
.then((response) => response.json())
.then((result) => {
console.log(result.data.children);
setPosts(result.data.children);
})
.catch(() => {
console.log("You have an error.");
});
}, []);
const handleSearch = (event) => {
console.log(event.target.name);
console.log(event.target.checked);
console.log(event.target.value);
if (event.target.name === "searchFor") {
setSearchTerm(event.target.value);
}
if (event.target.name === "searchType") {
setChecked(event.target.checked);
}
};
//The searchedPosts variable below contains the posts after the filter is run on the subRData array
//TO start with it returns the posts whose title include the search term
//Modify it to return posts based on if the checkbox is checked or not
//If the box is checked then return the post based on a title search
//if the box is not checked then return the post based on if the number of comments on it are greater than the provided number in the search box.
const searchedPosts = posts.filter(function (post) {
if (checked) {
return post.data.title.toLowerCase().includes(searchTerm.toLowerCase());
}
if (post.data.num_comments >= searchTerm) {
return post;
}
});
//subreddit gets rendered right here
//maybe insert below the seperate component
return (
<div>
<h1> Reddit Data Display </h1>
<hr />
<Search term={searchTerm} doSearch={handleSearch} searchType={checked} />
<hr/>
<SubRPostDisplay posts={searchedPosts} />
<hr />
<Totals posts={searchedPosts} />
</div>
);
}
function Search(props) {
return (
<div>
<h4>Search based on Title/Comments </h4>
<input
name="searchFor"
type="text"
id="search"
value={props.term}
onChange={props.doSearch}
/>
<input
name="searchType"
className="ml-3 mr-3"
type="checkbox"
id="searchType"
value={props.searchType}
onChange={props.doSearch}
/>{" "}
(check for title search)
</div>
);
}
function SubRPostDisplay(props) {
console.log(props);
return props.posts.map(function (post) {
return (
<div id="post" data-key={post.data.created}>
<img src={post.data.thumbnail} alt={post.data.title} />
<span id="postLink">
<a href={post.data.url}>{post.data.title}</a>
</span>
<button
id="commentNum"
type="button"
className="btn btn-info btn-sm mr-2"
>
Comments{" "}
<span className="badge badge-light">{post.data.num_comments}</span>
</button>
<button id="upsNum" type="button" className="btn btn-info btn-sm mr-2">
Ups <span className="badge badge-light">{post.data.ups}</span>
</button>
<hr />
</div>
);
});
}
function Totals(props) {
let numcomments = 0;
let numups = 0;
props.posts.forEach(function (post) {
numcomments += post.data.num_comments;
numups += post.data.ups;
});
return (
<div>
<button type="button" className="btn btn-info mr-2">
Total number of Comments{" "}
<span className="badge badge-light">{numcomments}</span>
</button>
<button type="button" className="btn btn-info mr-2">
Total number of Ups <span className="badge badge-light">{numups}</span>
</button>
</div>
);
}
export default App;

Answer 1

这在一定程度上取决于您想要什么，但您应该能够向图像源添加一个回退图像url。类似这样的东西：

<img
src={post.data.thumbnail || 'https://link.to/fallback.png'}
alt={post.data.title}
/>