React Unterminated JSX内容

路加

有谁能够发现为什么此反应性JS代码无法编译?我在某处缺少括号或括号,只是无法确定它在哪里。

有没有可用的工具可以复制和粘贴此代码,并且可以准确标记文件中缺少语法的位置?

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/>
);
}
ivo色

代码段的最后三行应如下所示:

      </div>
    </Images>
  );
}

基本上,您的结束div标记是错误的(<div/>而不是</div>)。然后,您缺少的结束标记</Images>

我建议使用Visual Studio Code及其出色的功能来折叠单个元素。请参考以下图像:

在此处输入图片说明

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章