Question

这是我遇到问题的地方，

const handleCLick = () => {
        const parsedId = getYouTubeID(videoLink);
        console.log(parsedId);
        setVideoId(parsedId);
        console.log(videoId);
    }

在这里，当我尝试记录“parsedId”时，它会正确记录数据

ioNng23DkIM

在使用 setVideoId() 函数后，当我尝试记录返回 undefined 的值时

undefined

这是日志输出的快照。

enter image description here

Home.js 代码：

import React, { useRef, useState } from "react";
import { Link } from "react-router-dom";
import getYouTubeID from 'get-youtube-id';

function Home(props) {
    const [videoLink, setVideoLink] = useState();
    const [isBool, setBool] = useState(false);
    const [videoId, setVideoId] = useState();
    const urlRef = useRef();

    const handleChange = (event) => {
        setVideoLink(event.target.value);
        if (urlRef.current.value === '') {
            alert('Please enter a URL');
            setBool(true);
        } else {
            setBool(false);
        }
    }

    const handleCLick = () => {
        const parsedId = getYouTubeID(videoLink);
        console.log(parsedId);
        setVideoId(parsedId);
        console.log(videoId);
    }

    return (
        <section className="homeLayout">
            <div className="logo-display">
                <img className="logo-img" alt="logo" src="./logo.png" />
                <h1>WatchIt</h1>
            </div>
            <div className="searchlayer">
                <form>
                    <input ref={urlRef} id="videoLink" placeholder="Enter the youtube video URL:" onBlur={handleChange} required />
                    <Link style={{ pointerEvents: isBool ? 'none' : 'initial' }} to={`/play?=${videoId}`} onClick={handleCLick}>Play</Link>
                </form>
            </div>
        </section>
    );
}

export default Home;

Answer 1

您可以使用 useEffect 来解决您的问题。

使用效果会监听你的状态变化，然后你可以在那里执行逻辑。

Answer 2

您面临的问题是因为 setState 将设置值最终，而不是立即设置（通常这意味着当组件再次呈现时更新将可见）。如果想在设置完值后做点什么，需要使用useEffect。

拆分我们得到的 handleClick，

const handleCLick = () => {
    const parsedId = getYouTubeID(videoLink);
    console.log(parsedId);
    setVideoId(parsedId); // Queue the change for `videoId`
}

useEffect(() => {
    console.log(videoId); 
}, [videoId]); // Call this function when the value of `videoId` changes

React useState() 钩子总是存储 undefined 甚至使用 console.log() 正确存储日志的数据；

2 个答案: