当页面重新加载时没有项目被呈现-试图实现一个搜索栏

Question

我正在尝试实现一个搜索栏，我将在下面附加它的代码。问题是，当页面重新加载时，搜索栏是空的，没有产品最终得到渲染，但一旦我开始在搜索栏中输入一些东西，项目开始按照搜索键呈现。

有谁能帮我一下吗?

.filter((val) => {
if (props.searchTerm == "") {
return val;
} else if (
val.additionalInfo.toLowerCase().includes(props.searchTerm)
) {
return val;
}
})
.map((post) => {
return (
<div className="product-metainfo col-2 mb-4">
<img src={post.images[0].src}></img>
<h3 className="product-brand">{post.brand}</h3>
<h4 className="product-product">{post.additionalInfo}</h4>
<div className="product-price">
<span>
<span className="discounted-price">Rs. {post.price} </span>
<span className="product-strike"> Rs. {post.mrp}</span>
</span>
<span className="product-discountPercentage">
({Math.floor((100 * post.discount) / post.mrp)}% off)
</span>
</div>
</div>
);
})}

Answer 1

您是否将searchTerm的默认状态设置为未定义或null?在这种情况下，您需要将searchTerm的默认状态设置为空字符串以使其工作。