React组件中正确使用对象（含Form.Control）及解决[object Object]问题

问题原因 #

Form.Control（作为textarea使用）的value属性仅接受字符串类型。当你直接传入对象或对象数组时，JavaScript会自动调用对象的toString()方法，而对象默认的toString()返回值就是[object Object]，这就是你看到错误输出的核心原因。

解决方案 #

无需修改logs数组的存储结构（继续保留对象数组，方便后续维护），仅在渲染textarea时，将每个日志对象转换为可读字符串，再拼接成适合多行显示的文本即可：

1. 基础场景（日志对象属性明确） #

假设你的日志对象结构为{ time: '2024-05-20 14:30', content: '执行测试操作' }，可以这样处理：

// 将对象数组转换为每行一条的字符串
const formattedLogs = logs.map(log => `${log.time} - ${log.content}`).join('\n');

// 渲染Form.Control组件
<Form.Control as="textarea" value={formattedLogs} readOnly />

2. 复杂日志结构（自定义格式化函数） #

如果日志对象属性较多或结构复杂，建议封装格式化函数提升代码可维护性：

// 自定义日志格式化函数
const formatLogEntry = (log) => {
  return `[${log.timestamp}] 操作类型：${log.action} | 详情：${log.details}`;
};

// 生成textarea所需的字符串
const logDisplayText = logs.map(formatLogEntry).join('\n');

// 渲染组件
<Form.Control as="textarea" value={logDisplayText} />

3. 保持日志数组的正确更新 #

你之前用扩展语法添加新日志的方式是正确的，继续沿用即可：

const handleAppendLog = () => {
  const newLog = { 
    timestamp: new Date().toLocaleString(), 
    action: '测试appendLog', 
    details: '新增一条测试日志' 
  };
  setLogs(prevLogs => [...prevLogs, newLog]);
};

这种方式既保留了对象数组的存储（方便后续对日志数据进行筛选、分析等操作），又能让textarea显示可读文本，无需依赖JSON.stringify和额外解析步骤。

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