在 React 的 TextField 中无法识别新行 '\n'

Question

语境

我正在使用 Material UI TextField 并映射从数据库 (MongoDB) 获取的对象数组。 就像是：

{state.map((item) => (
         <TextField
          name="description"
          multiline
          required
          type="text"
          value={item.description}
          onChange={handleChange}
        />)
      )
}

其中state是从数据库中获取的数组。

问题

item.description使用\n转义序列显示，而不是将行分隔为新行。

例子

附加信息

• 当我尝试在我的 React 代码中执行console.log(item.description.split('\n'))时，我在控制台中得到以下 output -

好像 JS 甚至没有识别\n ！ 但是当我在控制台运行它时在同一个地方我得到了这个 -

提前致谢！
如果需要其他任何东西来更好地理解问题，请告诉我

Answer 1

显然我通过使用替换和正则表达式全局搜索创建一个助手 function 解决了这个问题

const parseLines = (value) => value.replace(/(\\n)/g, "\n");

我意识到我必须使用\\n而不是\n来检测\n n 的字符串模式并将其替换为简单的换行符\n 。

然后在 TextField 中

<TextField               
 name="description"              
 multiline
 required
 type="text"
 value={parseLines(item.description)}
 onChange={handleChange}
/>

Answer 2

尝试使用<p>显示您的描述。 它会自动为每个元素创建一个新行。 如果这不起作用，请在每一行之后使用<br>标记。 您可以使用它手动添加换行符。