Блог

Привет, мне трудно понять, почему .split не работает строка, которую я передаю. Это мой анализатор строк, который возвращает строку в виде отдельных <p> тегов

 const formatString = (str) => {
        return str.split('n').map((line, index) =>
            <p key={index}>{line}</p>
        )
    }
 

Я использую API, который возвращает объект со description свойством и meta свойство.
Вот какое description значение будет отображаться в отладчике:

 description: "Level : Lv.3nType : CreaturennA special monster that's only available on the ice 
island of Rien. One of the grown Murus featuring an unusually thick lips."
 

Когда я передаю это свойство в свою formatString() функцию, оно не разбивает строку и не возвращает отдельные <p> вложенные строки, а возвращает исходные входные данные, которые возвращаются. Я также установил входные данные в качестве переменной и передал их вместо этого и получил ожидаемый результат.

ожидаемый результат:

 Level : Lv.3
Type : Creature

A special monster that's only available on the ice island of Rien. One of the grown Murus featuring an 
unusually thick lips."
 

Я пытался использовать значение, объявленное как через useRef() , так и useState() , и это, похоже, не имеет значения. Что касается неизменности, .split() она не изменяет строку, поэтому я не понимаю, почему моя функция не может ее разобрать.

Вот ссылка на смоделированную проблему в codesandbox:

https://codesandbox.io/s/amazing-maxwell-dhs4k?file=/src/App.js

Побег с помощью \

 const formatString = (str) => {
    return str.split('\n').map((line, index) =>
        <p key={index}>{line}</p>
    )
}
 

Замените все совпадения подстановочным знаком типа {{n}}, а затем выполните разделение.

 const formatString = (str) => {
         return str.replace(/\n/gi,'{{n}}')
                   .split('{{n}}')
                   .map((line, index) => <p key={index}>{line}</p>); 
};