React中如何将搜索结果传递到另一页面/组件并修复二次点击显示问题

问题根因 #

• Redux的dispatch是异步操作，你调用dispatch(SEARCHAction())之后立刻读取filtered值，此时异步搜索请求还未完成，拿到的是上一次缓存的旧结果，所以第一次点击搜索时赋值给filteredData的是旧数据，第二次点击时才能拿到第一次请求返回的结果，就出现了“第二次点击才生效”的表现。
• onSubmit事件绑定位置错误，表单提交事件应该绑定在<form>标签上，而不是提交按钮上。
• 搜索关键词searchTerm没有传递给搜索action，Reducer无法拿到搜索条件执行过滤。
• 组件内重复维护filteredData状态没有必要，完全可以直接复用Redux中存储的filtered数据，避免多状态同步导致的不一致。

修复后代码 #

import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom' // 若使用其他路由方案可替换对应跳转方法

function SearchBar() {
    const [searchTerm , setSearchTerm] = useState('')
    const dispatch = useDispatch()
    const navigate = useNavigate()
    const searchItems = useSelector((state) => state.searchItems)       
    const { loading, filtered} = searchItems;         

    // 监听搜索结果变化，结果返回后自动跳转到结果页
    useEffect(() => {
      if(filtered && !loading) {
        navigate('/result') // 替换为你的结果页实际路由
      }
    }, [filtered, loading, navigate])

    const getJobs = () => {
       // 把搜索关键词传递给搜索action
       dispatch(SEARCHAction(searchTerm));
    }

    const handleSearch = (e) => {
       e.preventDefault();
       // 可加空搜索词拦截逻辑
       if(!searchTerm.trim()) return
       getJobs();
    }

    return (      
      <div>
        {/* 把onSubmit绑定到form标签 */}
        <form onSubmit={handleSearch}>
          <div>           
              <input 
                    onChange={e=>setSearchTerm(e.target.value)}                                                                              
                    id="search-input"
                    type="text" 
                    className="form-control job-field lg:col-span-9 h-12 px-3 outline-none" 
                    placeholder="job title, keywords or company name"
                    value={searchTerm} // 绑定value变为受控组件，避免状态不一致
              />
              <button
                    type="submit"                              
                    className="btn search-btn border-0 lg:col-span-3">
                    <i className="fa fa-search mx-1"></i>
              </button> 
          </div>
        </form>
      </div>
    )
}

结果页获取数据方式 #

直接在result组件中调用useSelector((state) => state.searchItems.filtered)读取全局存储的搜索结果即可，不需要额外做跨组件传参。

内容的提问来源于stack exchange，提问作者fatemeh zamanipour