ReactJS输入框实时英阿翻译功能实现问题及代码排查

核心问题 #

1. 输入框无法输入：输入框的value绑定了output状态而非用户输入的input状态，导致输入框始终显示翻译结果，无法正常输入内容。
2. 无限循环请求：useEffect未设置依赖数组，组件每次渲染都会触发translate函数，引发无限网络请求与频繁重渲染。
3. 翻译结果无展示：翻译后的output状态未绑定到可展示元素，用户看不到翻译内容。

修复后的代码 #

import React, { useState, useEffect, useCallback } from 'react';
import './Home.css';
import search from './search.png';
import Footer from "./Footer";
import axios from 'axios';

function Home() {
    const [to, setTo] = useState('ar');
    const [from, setFrom] = useState('en'); 
    const [input, setInput] = useState('');
    const [output, setOutput] = useState('');
    const [isLoading, setIsLoading] = useState(false);

    // 防抖函数：减少输入过程中的请求次数
    const debounce = (func, delay) => {
        let timeoutId;
        return (...args) => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    };

    const translate = useCallback(() => {
        if (!input.trim()) {
            setOutput('');
            return;
        }
        setIsLoading(true);
        const params = new URLSearchParams();
        params.append('q', input);
        params.append('source', from);
        params.append('target', to);
        params.append('api_key', 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx');

        axios.post('https://libretranslate.de/translate', params, {
            headers: {
                'accept': 'application/json',
                'Content-Type': 'application/x-www-form-urlencoded',
            },
        }).then(res => {
            setOutput(res.data.translatedText);
        }).catch(err => {
            console.error('翻译请求失败:', err);
            setOutput('翻译失败，请重试');
        }).finally(() => {
            setIsLoading(false);
        });
    }, [input, from, to]);

    // 防抖后的翻译函数
    const debouncedTranslate = useCallback(debounce(translate, 500), [translate]);

    useEffect(() => {
        debouncedTranslate();
    }, [debouncedTranslate]);

    return (
        <>
            <div id="searchBox">
                <div id="search">
                    <img src={search} alt="search-Button"/>
                    {/* 输入框绑定input状态，显示用户输入内容 */}
                    <input 
                        onInput={(e) => setInput(e.target.value)} 
                        value={input} 
                        id="searchArabic" 
                        type="text" 
                        placeholder='Enter text here.'
                        disabled={isLoading}
                    />
                </div>
            </div>

            <div id="copyBox">
                {/* 文本域绑定output状态，展示翻译结果 */}
                <textarea 
                    value={output} 
                    placeholder='翻译结果将显示在这里' 
                    rows="3" 
                    readOnly
                />
            </div>

            <Footer/>
        </>
    );
}

export default Home;

关键修改说明 #

• 输入框绑定修正：将输入框value改为input，确保输入内容与用户操作同步；添加disabled属性在加载时禁用输入，避免重复请求。
• 请求频率控制：通过防抖函数设置500ms延迟，减少输入过程中的网络请求次数，优化性能。
• 翻译结果展示：将textarea的value绑定到output，设置readOnly防止误修改，同时更新提示文本明确功能。
• 状态优化：添加isLoading状态提示加载状态，捕获请求错误并给出提示，提升用户体验；使用useCallback缓存函数，避免不必要的重渲染。

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