Блог

Я пытаюсь создать простой класс react, который при рендеринге возвращает заголовок и изображение на основе пути к изображению, который он получает в реквизитах от своего родительского компонента.

Каждый раз, когда я пытаюсь получить доступ к свойству this.props.eImage (путь к локальному изображению) значение указанного свойства не определено, как в eImage: undefined для первых двух рендеров (компонент по неизвестным причинам отображается 4 раза). У меня есть доступ к свойству, но по какой-то причине не к его значению.

Это приводит к тому, что метод рендеринга выдает ошибку «Не удается найти модуль ‘undefined’.

Я пытался использовать методы жизненного цикла, такие как getDerivedState и component willRecieveProps, чтобы сначала сохранить путь к изображению в состоянии, а затем использовать его при рендеринге, но безрезультатно, оба имеют одинаковый результат.

Это очень расстраивает, потому что это простая задача, но я не могу заставить ее работать. Пожалуйста, помогите. Сокращенный код является:

Родительский :

 import React, {Component} from 'react';
import Title from './Title/Title.js';
import Description from './Description/Description.js';
import OrderSection from './OrderSection/OrderSection.js';
import './excursionStyle.css';

const excursionList = [
  {
    excTitle : "Музейный Дрезден",
    excDescription: `Дрезденская картинная галерея, как всегда, радует :)`} 
  ]

class Excursion extends Component {
    constructor(){
        super();
        this.state = {
        };
      };

    getCurrentIndex = (name) => {
      return excursionList.find(exc =>
        exc.excTitle === name
      )
    }

  componentDidMount() {   
      const currentExcursion = this.getCurrentIndex(this.props.match.params.name);
      this.setState(currentExcursion);
    };
    
    render(){    
      return (
          <div className="body">
            <div className="excursion">
            <Title eTitle={this.state.excTitle} eImage={this.state.excImageUrl}/>
                <Description eDescription = {this.state.excDescription}/>
                <OrderSection eTitle = {this.state.excTitle}/>
          </div>
          </div>
            );
    }
        
}

  

Дочерний :

 import React, {Component} from 'react';
import './Title.css';

class Title extends Component{
    constructor(props){
        super(props);     
    }
    render() {  
        console.log(this.props)
        return (
            <div>
            <header className = "flex">
                <p className = "f2 b">{this.props.eTitle}</p>
            </header>
            <div>
                    <img src={require(this.props.eImage)}></img>                                                                      
            </div>
            </div>    
        );
    }
}

export default Title;
  

Ваш Excursion компонент начинается с этого состояния:

 this.state = {
};
  

Это означает, что при рендеринге Title использование this.state.excImageUrl обращается к свойству, которое не существует в объекте состояния, что приводит к значению undefined . Итак, ваш Title компонент видит eImage значение undefined .

Если Title требуется это свойство, вам не нужно отображать Title , пока оно у вас не будет. Обычно это делается с помощью какой-либо защиты, например (в Excursion ):

 render(){    
  const eImage = this.state.excImageUrl;
  return (
      <div className="body">
        <div className="excursion">
        {eImage amp;amp; <Title eTitle={this.state.excTitle} eImage={eImage}/>
            <Description eDescription = {this.state.excDescription}/>
            <OrderSection eTitle = {this.state.excTitle}/>
        }
      </div>
      </div>
        );
}
  

Обратите внимание на {eImage amp;amp; <Title ... />} структуру, которая является защитной. React игнорирует заполнители выражений, значение выражения которых id undefined или null или false , поэтому, если eImage есть undefined , {eImage amp;amp; <Title ... />} будет undefined ( Title не будет использоваться). Но если eImage это непустая строка (например), {eImage amp;amp; <Title ... />} результатом будет Title .

Примечание относительно:

…компонент по неизвестным причинам отображается 4 раза…

То, как Excursion написано, всегда будет отображаться как минимум дважды: один раз без каких-либо включений state , а затем снова после componentDidMount обновления состояния. Оно также будет отображаться при каждом изменении его реквизитов, поэтому, если (например) его родительский компонент присваивает ему одно match значение для начала, но затем обновляет его другим, оно, скорее всего, будет отображаться три раза. Если родительский компонент повторяется match более одного раза…

Решена проблема путем установки состояния исключения перед первым отображением (с использованием componentWillMount). Большое спасибо за ответы.