React useState() 钩子总是存储未定义的数据，甚至使用 console.log() 正确存储日志的数据；答案

【问题标题】：The React useState() hooks stores undefined always even the data that is to be stored logs correctly using console.log();React useState() 钩子总是存储未定义的数据，甚至使用 console.log() 正确存储日志的数据；
【发布时间】：2021-06-24 14:48:53
【问题描述】：

这是我遇到问题的地方，

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

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

ioNng23DkIM

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

undefined

这是日志输出的快照。

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;

【问题讨论】：

setVideoId 是异步的，所以videoId 不会立即设置
那么我应该怎么做才能解决我的问题呢？ @尼克帕森斯
当videoId 最终被设置时，您的函数将使用设置的值重新渲染。所以应该没有问题，你的问题到底是什么/什么不起作用？

标签： reactjs react-hooks use-state

【解决方案1】：

您面临的问题是因为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

【讨论】：

【解决方案2】：

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

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

【讨论】：