如何将Java API响应的布尔值传递给React子组件并解决isFavourite undefined问题

你遇到的isFavourite为undefined的问题，核心是以下几处代码错误，对应修改即可： #

核心问题梳理 #

• 父组件Movie初始状态设置错误：你把movie的初始值设为了空数组[]，但API返回的是对象，首次渲染时接口还没返回数据，movie.isUserFavourite自然是undefined，直接传给子组件就会导致子组件初始状态异常
• 父组件存在明显笔误：渲染时用了不存在的ad.title，导出时写的是export default Ad，和组件名Movie不一致
• 子组件状态不会随传入属性更新：子组件的useState仅会在首次渲染时初始化，就算父组件后续拿到了正确的isUserFavourite值传过来，子组件的本地状态也不会自动更新
• 子组件点击事件的回调写法错误：fetch的then里直接写setIsFavourite会立刻执行，不会等接口请求完成

修复后的代码 #

1. Movie组件修复 #

const Movie = ({match}) => {
    // 初始值设为null，标记未加载状态
    const [movie, setMovie] = useState(null);

    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);
                }),
        []
    );

    // 加载完成前显示加载态，避免传递undefined给子组件
    if (!movie) return <div>加载中...</div>

    return (
      <div>
            {/* 修正笔误，用movie而非ad */}
            <h2>{movie.title}</h2>
            <FavouriteButton id={movie.id} isUserFavourite={movie.isUserFavourite}/>
        </div>
    );
};
// 修正导出名
export default Movie;

2. FavouriteButton组件修复 #

const FavouriteButton = (props) => {
    const [isFavourite, setIsFavourite] = useState(props.isUserFavourite);

    // 监听父组件传入的isUserFavourite变化，同步更新本地状态
    useEffect(() => {
        setIsFavourite(props.isUserFavourite)
    }, [props.isUserFavourite])

    const onClickHandler = () => {
        const requestOptions = {
            method: "PATCH",
        };
        // 修正then的回调写法，等请求完成再更新状态
        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;

内容的提问来源于stack exchange，提问作者JuniorA