React组件中点击按钮ID存入localStorage后取值为null的问题求助

你的代码里有三个关键问题导致coursebtn返回null：

1. 函数名拼写错误
   你定义的函数是handleButtonClilck（多了一个字母l），但按钮调用的是handleButtonClick，点击事件根本没触发正确的函数，自然不会往localStorage里存值。

2. 未传递事件对象
   按钮的onClick回调只传了'chapter'，没传event参数，导致函数里的event是undefined，无法获取event.target.id。

3. localStorage读取时机问题
   const coursebtn = localStorage.getItem("btncourseId")是在组件初始化时执行一次，就算之后localStorage更新了，这个变量也不会自动刷新，需要用状态配合useEffect同步。

修正后的代码示例 #

方案1：修正事件传递与函数名

import { useState, useEffect } from 'react';

// 修正函数名拼写
const handleButtonClick = (button, event) => {
    setButton(button);
    // 安全获取按钮ID并存入localStorage
    if (event?.target?.id) {
        localStorage.setItem("btncourseId", event.target.id);
        // 直接更新状态，让组件同步最新值
        setCoursebtn(event.target.id);
    }
}

// 用状态存储coursebtn，初始化时读取localStorage
const [coursebtn, setCoursebtn] = useState(localStorage.getItem("btncourseId"));

// 如果需要监听其他页面修改localStorage的情况，添加useEffect
useEffect(() => {
    const updateCourseBtn = () => {
        setCoursebtn(localStorage.getItem("btncourseId"));
    };
    window.addEventListener('storage', updateCourseBtn);
    return () => window.removeEventListener('storage', updateCourseBtn);
}, []);

按钮部分修改为传递event：

<button 
    id={course.id} 
    onClick={(event) => handleButtonClick('chapter', event)} 
    className="btn btn-primary btn-sm"
>
    Add Chapter
</button>

方案2：直接传递course.id（更可靠）

不需要依赖事件对象，直接把course.id作为参数传给函数，避免事件冒泡导致的target错误：

const handleButtonClick = (button, courseId) => {
    setButton(button);
    localStorage.setItem("btncourseId", courseId);
    setCoursebtn(courseId);
}

// 按钮调用时直接传入course.id
<button 
    id={course.id} 
    onClick={() => handleButtonClick('chapter', course.id)} 
    className="btn btn-primary btn-sm"
>
    Add Chapter
</button>

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