javascript - 将搜索结果传递给反应中的另一个页面/组件

Question

我想搜索我的数据，然后在搜索完成后我想在新页面中显示结果；这是我的搜索页面，我想在另一个名为 result 的页面/组件中显示结果：

• 结果将仅显示第二次单击/输入！

    function SearchBar() {
      const [allData,setAllData] = useState([]);
      const [filteredData,setFilteredData] = useState(allData);
      const [searchTerm , setSearchTerm] = useState('')
  
  
     const dispatch = useDispatch()
     const searchItems = useSelector((state) => state.searchItems)       
     const { loading, filtered} = searchItems;         
     const getJobs=()=>{
         dispatch(SEARCHAction());
         setFilteredData(filtered)
        }
  
      const handleSearch = (e) =>{
         e.preventDefault();
         getJobs();
  
    }
  return (      
      <form>
          <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"
                    />
  
                 <button
                       type="submit"
                       onSubmit={handleSearch}                                    
                       className="btn search-btn border-0 lg:col-span-3">
                       <i className="fa fa-search mx-1"></i>
                 </button> 
            </div>
    </form>
   </div>
    )
   }
  

标签： javascriptreactjsnpm

Answer 1

怎么了：

filtered仅在 react 重新渲染时更新。这意味着当您第一次按下按钮时，它会调度。但是filtered，您推送到状态的变量仍然具有旧值。

你想做什么：

正如 Sachin 建议的那样，有一个额外的页面：/results?keyword=value. 在方法中重定向到该页面getJobs。在新页面中，从 url 读取值并在那里过滤。