反应未终止的 JSX 内容答案

【问题标题】：React Unterminated JSX contents反应未终止的 JSX 内容
【发布时间】：2021-04-30 09:34:32
【问题描述】：

有谁知道为什么这个 react 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/>
);
}

【问题讨论】：

从外观上看，您的三个条件似乎都有不匹配的括号。我不完全确定您要检查的条件是什么，但似乎这就是您的问题所在。

标签： javascript html reactjs web-applications

【解决方案1】：

你的 sn-p 的最后三行应该如下：

      </div>
    </Images>
  );
}

基本上，您的结束 div 标记是错误的（<div/> 而不是 </div>）。然后你缺少</Images> 的结束标签。

我建议使用Visual Studio Code 及其很好的功能来折叠单个元素。参考以下图片：

【讨论】：