Привет, я пытаюсь получить текстовый файл внутри функции рендеринга jsx (html). Я создал функцию handleText, которая читает текст и просто разбивает текст на части. Я вижу это в журнале консоли, но когда я, например, пытаюсь отобразить его или просто вставляю myTextArr в рендер, он дает мне пустой элемент, например абзац без содержимого.

Вот мой код

 import React, { Component } from 'react';
import './App.css';
import blueHc from './hcaWarholBlue.jpg'
import redHc from './hcaWarholRed.jpg'
import illu from './illustration.jpg'
import text from './prinsessen.txt'



const imagesPath = {
  redHc: redHc,
  blueHc: blueHc
}     

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
        blueImage: true,
        myTextArr: []
        
    }
}

toggleImage = () => {
  this.setState(state => ({blueImage: !state.blueImage}));
}

getImageName = () => 
  this.state.blueImage ? 'redHc':'blueHc'


handleText =()=>{
  fetch(text)
  .then((r)=>r.text())
  .then(text => {   
    this.state.myTextArr.push(text.split(",(?=([^\']*\'[^\']*\')*[^\']*$)"));
   
    console.log(this.state.myTextArr)
  })
}

//(",(?=(?:[^\"]*\"[^\"]*\")*[^\"]*$)", -1) REGEX
      /*<img src={blueHc}></img>
      <img src={redHc}></img>
      <img src={illu}></img>*/

      /*<div className="hcA"> 
      <img style={{maxWidth: '50px'}} src={imagesPath[this.getImageName()]} onClick={this.toggleImage} />
      </div>*/

      /* <div>
        {this.state.myTextArr.map(text =>(
          <text>{text}</text>
        ))}
      </div>  */
  render = () => 

  <div>
    <tbody>
      <h1>Prinsessen på Ærten</h1>
      <h5>H.C. Andersen</h5>  
      <p>{this.state.myTextArr}</p>          
        <img style={{maxWidth: '50px', float: "left"}} src={imagesPath[this.getImageName()]} onClick={this.toggleImage} />
      </tbody>
  </div>
  
}

Я попытался использовать функцию карты, но безуспешно, поэтому теперь я просто вставил массив внутри тега p, но он даже не показывает там, он загружает только тег p

1
Jerry 14 Сен 2020 в 22:20

2 ответа

Лучший ответ

Вы можете попробовать с помощью setState повторно отобразить текстовый массив:

   handleText =()=>{
        fetch(text)
            .then((r)=>r.text())
            .then(text => {
                this.setState({myTextArr: [...this.state.myTextArr, text.split(",(?=([^\']*\'[^\']*\')*[^\']*$)")]});
            })
    }
2
Viet Dinh 14 Сен 2020 в 19:29

Поместите текст в <span>{text}</span> вместо <text>{text}</text>

1
Didier Prophete 14 Сен 2020 в 19:25