Блог

Главная - Вопросы по программированию - Неопределенная ошибка в теге источника изображения в react js

Неопределенная ошибка в теге источника изображения в react js

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я создал object of objects в качестве реквизита состояния и использую внутри функционального компонента в reatc js для отображения каждого изображения в строке.Но когда я запускаю свое приложение, я получаю undefined.jpg ошибка 

 {Object.keys(props.stateData.images).map(image=>
<img id={image.imageType} src={require(`../../../public/images/${image.imageType}.jpg`)} 
alt = {image.imageType} style={{opacity:image.opacity}}/>)}

Мои StateData:

 this.state = {images:
            {
                image1:{
                imageType:"image1",
                opacity:1
                },
                image2 :{
                    imageType:"image2",
                    opacity:1
                },
                image3:{
                    imageType:"image3",
                    opacity:1
                },
                image4: {
                    imageType:"image4",
                    opacity:1
                },
                image5:{
                    imageType:"image5",
                    opacity:1
                },
                image6:{
                imageType:"image6",
                opacity:1
                }
        }
        };

Комментарии:

1. Скорее всего, это связано с тем, что значение в ${image.imageType} остается неопределенным. Пожалуйста, опубликуйте больше кода о том, как вы получаете значения для props.stateData.images

2. @RohithMurali добавил данные о моем состоянии

3. Как присваивается это значение props.stateData.images .

4. StateData — это this.state

Ответ №1:

Если значения находятся в состоянии, вы можете попробовать получить доступ к значению непосредственно из самого состояния,

 {Object.keys(this.state.images).map(image=>
<img id={image.imageType} src={require(`../../../public/images/${image.imageType}.jpg`)} 
alt = {image.imageType} style={{opacity:image.opacity}}/>)}

Ответ №2:

Взгляните на этот подход — это быстрый и грязный пример. https://codesandbox.io/s/y0wwz81909?fontsize=14

Итак, идея здесь в том, что вы сопоставляете свой объект «изображения», чтобы получить имена ключей, и, в свою очередь, используете это для извлечения правильного объекта в состоянии.