多重渲染问题以及如何在这里使用 useEffect

Question

Filtering data by using this function, if I am calling this function in useEffect than its pushes to search results and not working well.

const AdvanceSearch = (props) => {
  
  const [region, setRegion] = useState("");  
  const [searchStuhl, setSearchStuhl] = useState("");    
      const filterData = (async ()=> {
     const filtereddata = await props.data.filter((item) => {
            return (
                item.region.toLowerCase().includes(region.toLowerCase())             
              && item.stuhl.toLowerCase().includes(searchStuhl.toLowerCase())             
          )}    
      ) await props.history.push({
            pathname: '/searchResults/',
            state:
            {
                data:filtereddata
            }
        })
  })

  //If the props. history.push is pass here instead of the above function then its sending the empty array and not the filtered data

    const handleSubmit = async (e) => {
    e.preventDefault()
      await filterData();      
     
    }

Answer 1

when you are changing the navigation URL with some data and there is multiple rendering then the following problem would be there.

• Check your route configuration for the path. is it configured to hold the changed path: in this scenario, you get fluctuated UI or we can say multiple renders
• yes you can use useEffect hooks to change the path and set the data here is the peace of code. here whenever your props.data will be changed filteredData will run and it will return the value when data will be available.

 const filteredData = useCallback(() => { if(props.data){ const filteredData = props.data.filter((item) => ( item.region.toLowerCase().includes(region.toLowerCase()) &&item.stuhl.toLowerCase().includes(searchStuhl.toLowerCase()) )); return filteredData } }, [props && props.data]); useEffect(()=> { const data = filteredData(); if(data){ props.history.push({ pathname:'/search-results', state:{data} }); } },[filteredData])

Answer 2

Try to remove async / await from the function. You don't need them to filter an array.