Question

我现在正在尝试搜索我的react组件。

数据来自graphql。

const blogs = useStaticQuery(graphql`
    query {
      allContentfulBlogPost(sort: { fields: publishedDate, order: DESC }) {
        edges {
          node {
            title
            publishedDate
            slug
            tag
          }
        }
      }
    }
  `)

这是我组件的返回状态。如您所见，我通过调用函数来呈现帖子

const renderBlogPosts = (someSearch) => {
    console.log(someSearch)
    if(!someSearch){
      return blogs.allContentfulBlogPost.edges.map((oneEdge, i) => {
        const tags = oneEdge.node.tag.split(" ")
        return (
          <div className="blog__post" key={`blog${i}`}>
            <Link to={oneEdge.node.slug}>
              <h4 className={`title${i}`}>{oneEdge.node.title}</h4>
              <p className="blog__date">{oneEdge.node.publishedDate}</p>
              <div style={{ display: "flex" }}>
                {tags.map((oneTag, i) => {
                  return <p className="blog__tag" key={`tag${i}`}>{oneTag}</p>
                })}
              </div>
            </Link>
          </div>
        )
      })
    }
    else{
      return <p>banana</p>
    }
  }


return (
    <Layout>
      <form onSubmit={handleSumbit}>
        <input type="text" onChange={handleChange} />
        <button>Search</button>
      </form>

      <div className="blog__container">
          {renderBlogPosts()}
      </div>
    </Layout>
  )

如果搜索结果中有内容，我现在只返回p标签。搜索事件来自“提交”按钮。

const handleChange = e => {
    setSearch(e.target.value)
  }

  const handleSumbit = e => {
    e.preventDefault()
    // Trying to change start if it will help rerender
    let someRandom = Math.floor(Math.random() * 100);
    setRandom(someRandom);
    renderBlogPosts(search)
  }

根据我的看法，当我按下按钮时，这应该重新呈现，并且此p标签应将原始帖子替换为香蕉。

但是帖子没有重新呈现

为什么我的搜索功能没有重新渲染组件？

0 个答案: