如何在textarea中渲染JSON数据并自定义结果值

嘿，我看你正在实现把JSON数据以自定义格式渲染到textarea里的需求，你的现有代码思路已经找对方向了！我来给你优化一下实现方案，让代码更健壮、易读，还能支持后续扩展：

首先，先看基础版的优化，把格式化逻辑抽离出来，让代码结构更清晰：

import React from 'react';
import { render } from 'react-dom';

const data = [
  { name: "peter", location: "boston" },
  { name: "john", location: "florida" }
];

class App extends React.Component {
  // 单独抽离格式化方法，让render逻辑更干净
  formatDataForTextarea = () => {
    return data.map(item => {
      // 用Object.entries遍历键值对，比直接替换JSON大括号更可靠
      return Object.entries(item)
        .map(([key, value]) => `${key}: "${value}"`)
        .join(', ');
    }).join('\n');
  };

  render() {
    return (
      <div>
        <textarea
          value={this.formatDataForTextarea()}
          rows='3'
          cols='30'
          readOnly {/* 如果不需要用户编辑，加上这个属性更严谨 */}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

为什么要这么改？ #

• 更可靠的格式化：直接用JSON.stringify再替换大括号的方式，遇到对象有嵌套结构或者特殊字符时容易出问题。用Object.entries遍历键值对，你可以完全自定义每个字段的显示格式，比如调整引号、分隔符都很方便。
• 代码可读性更高：把数据格式化逻辑和UI渲染逻辑分开，后续维护的时候一眼就能找到要修改的地方。
• 扩展性强：如果之后要调整显示格式（比如每个键值对单独换行，或者添加新字段），直接修改formatDataForTextarea方法就行，不用动渲染部分的代码。

如果需要支持用户编辑并转换回JSON #

要是你的需求还包括允许用户编辑textarea里的内容，然后把编辑后的文本转回JSON格式的数组，那可以加上状态管理和解析逻辑，比如这样：

import React from 'react';
import { render } from 'react-dom';

const initialData = [
  { name: "peter", location: "boston" },
  { name: "john", location: "florida" }
];

class App extends React.Component {
  // 用state管理textarea的值
  state = {
    textareaValue: this.formatDataForTextarea(initialData)
  };

  formatDataForTextarea = (data) => {
    return data.map(item => {
      return Object.entries(item)
        .map(([key, value]) => `${key}: "${value}"`)
        .join(', ');
    }).join('\n');
  };

  // 把textarea的文本解析回JSON数组
  parseTextToJson = () => {
    // 按行拆分，过滤空行
    const lines = this.state.textareaValue.split('\n').filter(line => line.trim());
    return lines.map(line => {
      // 拆分每个键值对，再转成对象
      const keyValuePairs = line.split(', ').map(pair => pair.split(': '));
      return Object.fromEntries(
        keyValuePairs.map(([key, value]) => [key, value.replace(/"/g, '')])
      );
    });
  };

  handleTextChange = (e) => {
    this.setState({ textareaValue: e.target.value });
  };

  handleGetResult = () => {
    const parsedData = this.parseTextToJson();
    console.log('转换后的JSON数据:', parsedData);
    // 这里可以添加提交或其他业务逻辑
  };

  render() {
    return (
      <div>
        <textarea
          value={this.state.textareaValue}
          onChange={this.handleTextChange}
          rows='3'
          cols='30'
        />
        <button onClick={this.handleGetResult}>获取格式化结果</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

这个版本里，用户编辑内容后点击按钮，就能把自定义格式的文本转回标准的JSON数组，满足交互性更强的需求。

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