web-dev-qa-db-ja.com

ReactフックがuseEffectの発火を遅らせましたか？

小道具が変更されたときに状態を更新するために、反応フックでuseEffect（）を使用しようとしています。しかし、遅延があり、フックの要素をもう一度クリックした後にのみuseEffectが発生します。フックを使用するのはかなり新しいですが、どんな助けでもいただければ幸いです。ありがとう

function ImageOrderSelect (props) {
  const [clicked, setClicked] = useState(false)
  const [options, setOptions] = useState(props.options)
  const [current, setCurrent] = useState(props.current)

  useEffect(() => {
      setCurrent(props.current)
    }, [props.current])


  if(!clicked){
    return (
        <div className="image-order-select-icon" onClick={() => setClicked(!clicked)}>
            <FontAwesomeIcon size="lg" icon={faCircle} />
            <p>{current}</p>
        </div>
    )
  } else if(clicked){
      return (
          <div className="image-order-select">
              {optionsList}
          </div>
      )
  }


}
reactjsreact-hooksuse-effect
4
Robert Templeton
    useEffect(() => {

      setTimeout(()=>{
       setCurrent(props.current)
      }, 1000)

    }, [props.current])

現在を表示する前に、タイムアウト/遅延を追加するだけです...

1
Abu Dujana Mahalail
  let optionsList = options.map((option, index) => {
  return (
  <div key={index} onClick={() => {

      props.handleImageSort(option, props.index)
      setTimeout(() => {
          setClicked(!clicked)
      }, .500)
  }}>
    <p>{option}</p>
  </div>
  )

}）

問題は、同時にsetClickedを呼び出そうとしていましたが、なんらかの理由で呼び出しが停止されていました。 setTimeoutは、理想的ではありませんが機能します。誰かがより良い解決策を持っているなら、それを聞いて興味があります。

0
Robert Templeton