[英]React Unterminated JSX contents
Is anyone able to spot why this react JS code won't compile?有谁能够发现为什么这个反应 JS 代码不能编译? I am missing a brace or a parenthesis somewhere, I just can't quite work out where it is.
我在某处缺少大括号或括号,我只是无法确定它在哪里。
Are there any tools available where I could copy and paste this code and it would flag exactly where in the file I am missing some syntax?是否有任何可用的工具可以复制和粘贴此代码,它会准确标记文件中我缺少某些语法的位置?
function Search() {
const [searchTerm, setSearchTerm] = useState("");
const [images, setImages] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [imagesPerPage, setImagesPerPage] = useState(10);
useEffect(() => {
const fetchImages = async () => {
setImages(JSONDATA);
}
fetchImages();
}, []);
// get current images
const indexOfLastImage = currentPage * ImagesPerPage
const indexOfFirstImage = indexOfLastImage - ImagesPerPage
const currentImages = images.slice(indexOfFirstImage, indexOfLastImage)
return (
<Images product_serial_number={val.product_serial_number} wip_id={val.wip_id} date={val.date}>
<div className="App">
<input
type="text"
placeholder="Search for wip_id, product_serial_number or date..."
onChange={(event) => {
setSearchTerm(event.target.value);
}}
/>
{JSONDATA.filter((val)=>{
if (searchTerm == "") {
return val
} else if (val.wip_id.toLowerCase().includes(searchTerm.toLowerCase())
|| val.product_serial_number.toLowerCase().includes(searchTerm.toLowerCase())
|| val.date.toLowerCase().includes(searchTerm.toLowerCase())) {
return val
}
}).map((val, key) => {
return (
<li> {val.wip_id}, | {val.product_serial_number}, | {val.date} </li>
);
})}
<div/>
);
}
The last three lines of your snippet should be as follows:代码段的最后三行应如下所示:
</div>
</Images>
);
}
Basically, your closing div
tag was wrong ( <div/>
instead of </div>
).基本上,您的结束
div
标签是错误的( <div/>
而不是</div>
)。 Then you were missing closing tag for </Images>
.然后您缺少
</Images>
的结束标记。
I suggest to use Visual Studio Code and its nice functionality to collapse individual elements.我建议使用Visual Studio Code及其出色的功能来折叠单个元素。 Refer to the following images:
请参考以下图片:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.