React中使用pre标签

需求：在react项目中，直接展示后端回传的数据。(格式是[{[{}]},{[{}]}],格式反正挺复杂的。)
思路：pre标签可以直接展示数据
问题：后端回传的是对象数组等、在使用pre标签中直接展示数据报错；

解决：将json格式转换成字符串格式

pre标签------简单理解

HTML中的pre标签定义与用法：

• 常用于表示计算机源代码；
• 可用于在页面中直接展示后端回传的数据等；
• 元素可定义预格式化的文本；被包围在 pre 元素中的文本通常会保留空格和换行符；而文本也会呈现为等宽字体；

JSON格式数据转换字符串格式

JSON.stringify()

• 将 JavaScript 对象转换为 JSON 字符串；

JSON.parse()

• 将JSON字符串转为一个对象；

JSON.stringify() 换行缩进

语法：JSON.stringify(value[, replacer[, space]])
   参数说明：
       value: 必需，要转换的 JavaScript 值（通常为对象或数组）
       replacer: 可选，用于转换结果的函数或数组
       space: 可选，文本添加缩进、空格和换行符

  JSON.stringify(data, null, 2);

React中使用pre标签展示对象

   return (
      <>
         <pre>{state.data}</pre>    //当data是字符串类型时
          <pre>{JSON.stringify(state.data)}</pre>    //当data是对象或数组时需要转成字符串
           <pre>{JSON.stringify(state.data,null,2)}</pre>    //换行、缩进两字符
      </>
  )