React项目出现'setCurrentItem'已声明未使用ts(6133)报错如何解决？

报错原因 #

这个TypeScript警告'setCurrentItem' is declared but its value is never read.ts(6133)的触发逻辑很明确：你通过useState声明了状态修改函数setCurrentItem，但在整个组件代码中没有调用过它。
同时你当前的输入框是受控组件（绑定了value属性到currentItem状态），缺少对应的onChange更新逻辑，实际运行时输入框也无法输入任何内容。

修复步骤 #

你只需要给输入框添加onChange事件监听，调用setCurrentItem同步用户输入的内容即可，同时可以补充表单提交的逻辑避免点按钮无响应：

修改后的Todoform.js完整代码 #

import React, { useState } from 'react';

function Todoform() {
    // 初始化空字符串更合理，null会导致控制台受控组件切换为非受控的警告
    const [currentItem, setCurrentItem] = useState('');

    // 新增输入框内容变化处理函数
    const handleInputChange = (e) => {
        setCurrentItem(e.target.value);
    };

    // 新增表单提交处理函数
    const handleSubmit = (e) => {
        e.preventDefault();
        if (currentItem.trim()) {
            // 这里可以后续加添加待办的逻辑，比如把currentItem存到待办列表里
            console.log('新增待办：', currentItem);
            // 提交后清空输入框
            setCurrentItem('');
        }
    };

    return (
      <form className='To-do' onSubmit={handleSubmit}>
       <input 
          type='text'
          placeholder='Add a todo'
          value={currentItem}
          name='text'
          className='to-do input' 
          onChange={handleInputChange}
      />
      <button className="to-do button">Add To-do</button>
      </form>
    );
}

export default Todoform;

补充说明 #

• 原来的useState初始值设为null会引发控制台警告：组件从受控变为非受控，改成初始值为空字符串''就可以避免这个问题
• 给form绑定onSubmit事件后，点击按钮或者按回车都可以触发表单提交逻辑，符合常用交互习惯

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