如何在 JavaScript（打字稿）中檢查字符串是否包含 substring？

Question

我正在嘗試創建一個搜索字段，並且我已經能夠進行搜索，但它只返回以相同標題鍵入或完全相同的帖子，這不會很有趣。 這發生在我的條件if (query.== post.title && query) return null中。 理想的情況是只搜索一個詞並返回類似的帖子。 我嘗試使用如下includes方法：

if (query.== post.title && query.includes(post.title) && query) return null

但它沒有用。

我也試過post.title.includes(query) ，但是當我添加這個條件時，我在輸入上鍵入的帖子被刪除並返回所有其他帖子，如果我刪除query.== post.title搜索不會t 會起作用，因為我的邏輯中的查詢是來自輸入的值。

{(() => {
  if (isLoading) return <LoadingBlock />
  if (!isLoading && postList.length === 0) return <NoDataWarning text='Nenhuma postagem encontrada.' />
  return postList.map((post, index) => {
    if (query !== post.title && query.includes(post.title) && query) return null //the problem is here
    return (
      <PostContainer position={index}>
        <PostBanner />
        <PostInfoContainer>
          <span>
            <AiFillCalendar />
            {new Date(post.createdAt).toLocaleDateString()}
          </span>
          <span>
            <FaUserCircle />
            {`${post.firstName} ${post.lastName}`}
          </span>
        </PostInfoContainer>
        <PostTitle>{post.title}</PostTitle>
      </PostContainer>
    )

完整代碼

import React, { useState, useEffect, useCallback } from 'react'
import api from 'services/api'
import { Link } from 'react-router-dom'
import { RectShape } from 'react-placeholder/lib/placeholders'
import { AiFillCalendar } from 'react-icons/ai'
import { FaUserCircle } from 'react-icons/fa'
import NoDataWarning from 'components/NoDataWarning'
import Can from 'components/Can'
import PayPlaceholder from 'components/PayPlaceholder'
import { Post } from 'types'

import { ButtonIcon, SearchGroup, SearchInput } from 'components/SearchBar/styles'
import { BiSearchAlt2 } from 'react-icons/bi'
import { Container, PostContainer, PostTitle, PostBanner, PostInfoContainer, PostGrid } from './styles'

const RegulatorioList: React.FC = () => {
  const [postList, setPostList] = useState<Post[]>([])
  const [isLoading, setIsLoading] = useState(true)
  const [query, setQuery] = useState('')
  const [result, setResult] = useState<Post[] | undefined>()

  const inputHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
    const enteredName = event.target.value
    setQuery(enteredName)
  }

  // This function is triggered when the Search buttion is clicked
  const search = () => {
    const foundItems = postList.filter(postList => postList.title.toLowerCase().includes(query.toLowerCase()))
    setResult(foundItems)
  }

  const fetchPosts = useCallback(() => {
    api
      .get<Post[]>('posts', { params: { filterInactives: true } })
      .then(response => {
        setPostList(response.data)
        setIsLoading(false)
      })
  }, [])

  useEffect(() => {
    fetchPosts()
    const interval = setInterval(fetchPosts, 180000)
    return () => clearInterval(interval)
  }, [fetchPosts])

  const LoadingBlock = () => (
    <>
      {new Array(15).fill('').map(() => (
        <RectShape color='lightgray' style={{ width: '100%', height: '350px', borderRadius: '5px' }} className='text-block' />
      ))}
    </>
  )

  return (
    <Container>
      <SearchGroup position={1}>
        <SearchInput value={query} onChange={inputHandler} placeholder='Search ' />
        <ButtonIcon type='button' onClick={search}>
          <BiSearchAlt2 />
        </ButtonIcon>
      </SearchGroup>
      <PostGrid>
        {(() => {
          if (isLoading) return <LoadingBlock />
          if (!isLoading && postList.length === 0) return <NoDataWarning text='Nenhuma postagem encontrada.' />
          return postList.map((post, index) => {
            // if (post.title.includes(query) !== post.title && query) return null
            // if (query !== indexOf(post.title) && query) return null
            // if (query !== post.title && post.title.includes(post.title) && query) return null //ALL TRYS
            // if (query !== post.title && query) return null
            if (query !== post.title && query) return null
            return null
            return (
              <PostContainer position={index}>
                <PostBanner />
                <PostInfoContainer>
                  <span>
                    <AiFillCalendar />
                    {new Date(post.createdAt).toLocaleDateString()}
                  </span>
                  <span>
                    <FaUserCircle />
                    {`${post.firstName} ${post.lastName}`}
                  </span>
                </PostInfoContainer>
                <PostTitle>{post.title}</PostTitle>
              </PostContainer>
            )
            return (
              <Link key={post.id} to={`/regulatorio/${post.id}`} style={{ textDecoration: 'none', height: '100%' }}>
                <PostContainer position={index}>
                  <PostBanner />
                  <PostInfoContainer>
                    <span>
                      <AiFillCalendar />
                      {new Date(post.createdAt).toLocaleDateString()}
                    </span>
                    <span>
                      <FaUserCircle />
                      {`${post.firstName} ${post.lastName}`}
                    </span>
                  </PostInfoContainer>
                  <PostTitle>{post.title}</PostTitle>
                </PostContainer>
              </Link>
            )
          })
        })()}
      </PostGrid>
    </Container>
  )
}

export default RegulatorioList

Answer 1

我用這個條件解決了這個問題

 if (!post.title.toLowerCase().includes(query.toLowerCase()) && query) return null