我想將布林值從 API Java 回應物件傳遞給子組件。我可以更改什么以在子組件中使用 isFavourite 值？主要問題是如何將布林值傳遞給其他組件。目前，我在isFavourite上收到一個未定義的值。
回復
{"id":12,"title":"The Lord Of The Rings","isUserFavourite":true}
電影
const Movie = ({match}) => {
const [movie, setMovie] = useState([]);
useEffect(
() =>
fetch(`http://localhost:8080/api/movie/fetch/${match.params.id}`, {
headers: {
"Content-Type": "application/json",
},
})
.then((response) => {
return response.json();
})
.then((data) => {
setMovie(data);
}),
[]
);
return (
<div>
<h2>{ad.title}</h2>
<FavouriteButton id={movie.id} isUserFavourite={movie.isUserFavourite}/>
</div>
);
};
export default Ad;
收藏按鈕
const FavouriteButton = (props) => {
const [isFavourite, setIsFavourite] = useState(props.isUserFavourite);
const onClickHandler = () => {
const requestOptions = {
method: "PATCH",
};
fetch(`http://localhost:8080/user/favourite/${props.id}`, requestOptions).then(
setIsFavourite(prevState => !prevState));
;
}
return <div>{isFavourite ? (<p>FAVOURITE</p>) : (<p>NOT-FAVOURITE</p>)}
<button onClick={onClickHandler}>FAVOURITE/NOT-FAVOURITE</button>
</div>
}
export default FavouriteButton;
uj5u.com熱心網友回復：
您在 API 完成之前渲染組件，因此在 API 呼叫完成之前子組件內部的狀態被初始化為“未定義”，嘗試添加加載器或條件以檢查 API 是否尚未完成t 渲染組件 FavouriteButton
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/354899.html
標籤：反应