如果相同 URL，react router dom history.replace 不會重新渲染組件

Question

我創建了組件，其中在文本框 keydown 上我重定向如下

const Search = (props) => {

  const searchKeyDown = (e) => {
    if(e.key === 'Enter'){
      if(e.target.value){
        props.history.replace(`/search/${e.target.value}`)
      } else {
        alert('Search cannot be empty')
      }
    }
  }
  return (
    <React.Fragment>
      Search <input type='text' placeholder='Search...' onKeyDown={(e) => {searchKeyDown(e)}}/>
    </React.Fragment>
  )
}

export default withRouter(Search)

但是如果您在下面的文本框中更改文本是我的代碼，我的組件將不會重新呈現。 我有 useEffect 來檢測 state 變化但沒有工作。 有人能幫幫我嗎

我的完整 stackbliz 是https://stackblitz.com/edit/react-ts-k71agk?file=index.tsx

const SearchData = (props:any) =>{
  const searchText = props.match.params.searchText
  const [searchParams, setSearchParams] = useState(null)

  useEffect(()=>{
    setSearchParams(searchText)
  },[])

  useEffect(()=>{
    if(searchParams !== null) console.log(searchParams)
  },[searchParams])

  return (
    <React.Fragment>
      {searchParams}
    </React.Fragment>
  )
}

Answer 1

您需要將 searchText 添加到 useEffect 中的依賴項數組：

useEffect(()=>{
    setSearchParams(searchText)
},[searchText])

並且組件將在 searchText 發生任何更改后重新呈現。