在React组件外部使用i18N渲染输入元素报错，求解决方法

你现在的问题核心是组件外部无法直接调用useTranslation返回的t函数——useTranslation是React Hook，只能在组件或自定义Hook的顶层调用，你把配置对象定义在组件外面时，t还没被初始化，自然会报错。

优化思路 #

1. 配置对象只存储多语言键名，不提前调用t，留到组件内部再处理翻译
2. 修复遍历渲染的语法错误，让渲染函数能拿到翻译后的内容
3. 优化状态更新逻辑，避免闭包陷阱

修正后的完整代码 #

import { useState } from 'react';
import { useTranslation } from 'react-i18next';

// 仅存储多语言key，不直接调用t
const inputConfigs = {
  name: { 
    labelKey: "NAME", 
    placeholderKey: "NAME_PLACEHOLDER" 
  },
  age: { 
    labelKey: "AGE", 
    placeholderKey: "AGE_PLACEHOLDER" 
  }
};

export const Test = () => {
  const [config, setConfig] = useState({
    name: 'Test',
    age: '12'
  });
  // 在组件内部正常获取t函数
  const { t } = useTranslation('test');

  // 用函数式更新避免闭包问题
  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setConfig(prevConfig => ({
      ...prevConfig,
      [name]: value,
    }));
  };

  // 渲染函数接收翻译后的label、占位符和输入值
  const renderInputRow = (key, value, label, placeholder) => (
    <tr key={key}> {/* 必须添加key，符合React列表渲染规范 */}
      <th>
        <label htmlFor={key}>
          {label}
        </label>
      </th>
      <td>
        <input 
          id={key} 
          name={key} 
          value={value} 
          placeholder={placeholder}
          onChange={handleInputChange} 
        />
      </td>
    </tr>
  );

  return (
    <table>
      <tbody>
        {
          Object.entries(inputConfigs).map(([key, configItem]) => {
            // 在组件内部用t翻译对应的key
            const label = t(configItem.labelKey);
            const placeholder = t(configItem.placeholderKey);
            // 从状态中获取对应输入框的值
            const inputValue = config[key];
            return renderInputRow(key, inputValue, label, placeholder);
          })
        }
      </tbody>
    </table>
  );
};

关键改动说明 #

• 多语言处理：把原配置对象改成仅存翻译键名的结构，在组件内部拿到t后再执行翻译，完全符合React Hook的使用规则
• 列表渲染：修复了map的参数解构错误，同时给每个列表项添加key属性，避免React警告
• 状态更新：改用函数式更新setConfig(prev => ...)，解决异步场景下的状态更新不及时问题
• 渲染逻辑：调整渲染函数参数，让它直接拿到最终需要展示的内容，代码逻辑更清晰

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