從子組件更新父狀態並將響應發送回子組件

Question

我有兩個組件，

組分 A -

const handleLike(id) {
.....
handle the logic for the button and setting the state
}

<ComponentB handleLike={handleLike}/>

組分 B -

return(
    <>
        <button onclick={props.handleLike("123")}/>
    </>
)

<ComponentB handleLike={handleLike}/>

此代碼有效，但它更改了組件 A 中的狀態，並且組件 B 中的狀態未更新

如何解決？

Answer 1

組分 A -

const[likeId,setLikeId]= useState(like)
const handleLike(id) {
  .....
   handle the logic for the button and setting the state
  setLikeId(id)
}

<ComponentB likeId={likeId} handleLike={handleLike}/>

組分 B -

const { likeId }=props
return(
<>
    <button onclick={props.handleLike("123")}/>
</>
)

Answer 2

您可以在父組件中使用 useState，處理來自子組件的回調，更新狀態，並將狀態傳遞給子組件，如下所示：

const ComponentA= () => {
   const [likes, setLikes] = useState('')

   const handleLikeCallback(id) {
       setLikes(id)
   }

   return <ComponentB handleLikeCallback={handleLikeCallback} likes={likes}/>
}

const ComponentB = ({handleLikeCallback, likes}) => 
    <button onclick={handleLikeCallback("123")}>{likes}</button>