Json 材质UI文本字段不在复杂字符串上执行换行

我试图从MySQL查询中获取一些数据，以便在MaterialUI文本字段中很好地输出。我的文本字段如下所示：

<TextField
  className={classes.output}
  InputProps={{
    classes: {
      input: classes.code,
    },
  }}
  multiline
  rows={20}
  variant="outlined"
  value={trace}
/>

我想让它呈现这样的东西，所有的换行符实际上都指向一个换行符：

但我得到的是直接打印的\n：

---

我能做些什么使它以我想要的方式输出吗？我已经测试过将跟踪变量更改为一个简单的'hey\nhey'字符串，效果很好，因此它似乎与这个复杂字符串有关。通过使用MySql xdevapi执行Sql查询并使用Json.stringify（查询，未定义，2）转换为字符串来生成字符串。

问题不在于您的变量是数组而不是测试中的简单字符串吗

---

编辑：问题似乎来自JSON.stringify（）部分。如果使用JSON.stringify（'\n'），则输出将是一个转义'\n'，而不是实际的换行符。

结果表明，问题在于JSON本身包含换行符\n和一些转义字符串引号。然后，JSON.stringify（）方法实际打印这些字符。我通过添加

.replace（/\\n/g，'\n'）。replace（/\\\“/g，”）

解决了这个问题。这不是最优雅的解决方案，但它提供了我想要的输出。

它是一个JSON数组，已通过JSON.stringify（）方法进行了字符串化。这应该不是问题。实际上，如果您使用JSON.stringify（'\n'），输出将是一个转义'\n'，这意味着您将看到'\n'，而不是实际的换行符。您可以在示例中看到这一点，您可以尝试显示跟踪[1]来测试这一点。好的，我明白了，问题可能出在stringify部分。是的，我可以确认查询的原始结果中包含换行符，这就是为什么要打印换行符。那么问题是，有没有一种简单的方法来“取消”它们？我只想改变你处理输入的方式。如果你知道它是一个包含字符串的数组，你可以使用join方法：在我看来，你需要一个textarea而不是textfield。或者，如果您希望输出像图片中一样缩进，那么最好的方法可能是创建一个字符串数组，并根据给定的条件将它们分隔开，然后使用map（）函数一次打印文本字段中的每一行。我以代码编辑器中vscode生成的html为例，它们使用带span标记的div序列，内部使用“ ；缩进”

[
  "select * from person",
  "{\n  \"steps\": [\n    {\n      \"join_preparation\": {\n        \"select#\": 1,\n        \"steps\": 
[\n          {\n            \"expanded_query\": \"/* select#1 */ select `person`.`name` AS `name` from `person`\"
\n          }\n        ]\n      }\n    },\n    {\n      \"join_optimization\": {\n        \"select#\": 
1,\n        \"steps\": [\n          {\n            \"table_dependencies\": [\n    
          {\n                \"table\": \"`person`\",\n                \"row_may_be_null\": false,\n  
              \"map_bit\": 0,\n                \"depends_on_map_bits\": [\n
                ]\n              }\n            ]\n          },\n          {\n            \"rows_estimation\": [\n              {\n  
              \"table\": \"`person`\",\n                \"table_scan\":
 {\n                  \"rows\": 2,\n                  \"cost\": 0.25\n                }\n
              }\n            ]\n          },\n          {\n            \"considered_execution_plans\":
 [\n              {\n                \"plan_prefix\": [\n                ],\n                \"table\": \"`person`\",\n                \
"best_access_path\"
: {\n     
             \"considered_access_paths\": [\n                    {\n                      \"rows_to_scan\": 2,\n                      \
"access_type\": \"scan\",\n                      \"resulting_rows\": 2,\n                      \"cost\": 0.45,\n                      \
"chosen\": true\n                    }\n                  ]\n                },\n                \
"condition_filtering_pct\": 100,\n                \"rows_for_plan\": 2,\n                \"cost_for_plan\": 0.45,\n                \
"chosen\": true\n              }\n            ]\n          },\n          {\n            \
"attaching_conditions_to_tables\": {\n              \"original_condition\": null,\n              \"attached_conditions_computation\": [\n              ],\n              \
"attached_conditions_summary\": [\n                {\n                  \"table\": \"`person`\",\n  
                \"attached\": null\n                }\n              ]\n            }\n          },\n          {\n            \
"finalizing_table_conditions\": [\n            ]\n          },\n          {\n            \"refine_plan\": [\n              {\n                \
"table\": \"`person`\"\n              }\n            ]\n          }\n        ]\n      }\n    },\n    {\n      \"join_execution\": {\n        \"select#\": 1,\n        \"steps\": [\n        ]\n      }\n    }\n  ]\n}",
  0,
  0
]