React项目中useState输入框变更未触发useEffect问题求助

你的问题出在useEffect的依赖数组上——当前你传的是空数组[]，这会让这个副作用钩子只在组件首次挂载时执行一次，后续text状态变更时完全不会触发它。

修改代码 #

把text添加到useEffect的依赖数组中，这样每次text更新，钩子都会重新运行，生成对应新文本的二维码：

const Addtoform= () => {
    const [text, setText] = useState('');
    const handleSubmit = (e) => {
     e.preventDefault();
     console.log(text);
    }

    const [src, setSrc] = useState('');
   
    useEffect(() => {
        // 空文本时跳过生成，避免无效调用
        if (!text) return;
     QRCode.toDataURL(text).then((data) => {
         setSrc(data);
     });
  
    }, [text]); // 这里添加text作为依赖

return (
    <>
      <img src={src} alt="二维码" />
    <p> Text: {text}</p>
    <form onSubmit={handleSubmit}>
    <input type="text" value={text} required onChange={(e) => setText(e.target.value)}/>
    <input type="submit" />
    </form>
    </>
   );
 };

export default Addtoform ;

额外优化提示 #

• 给img标签加上alt属性，提升页面可访问性
• 空文本时跳过二维码生成，减少不必要的异步请求

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