0

テキストボックスのキーダウンで次のようにリダイレクトするコンポーネントを作成しました

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 がありますが、機能していません。誰か助けてくれませんか

私の完全なスタックブリズは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>
  )
}
4

1 に答える 1

1

useEffect の依存配列に searchText を追加する必要があります。

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

コンポーネントは、searchText の変更後に再レンダリングされます。

于 2020-07-29T18:31:53.320 に答える