Как визуализировать изображение из массива в React?

Я новичок в React. Я только что научился создавать API с помощью nodejs и выражать из MySQL. Вы можете проверить выходной API json по адресу app.subarnanto.com/api/inventory.

Как вы визуализируете изображение? Это мой код. я тоже получил предупреждение

Предупреждение: каждый дочерний элемент в массиве или итераторе должен иметь уникальную "ключевую" опору.

И в-третьих, как мне улучшить свой код? Спасибо

import React from 'react';
import axios from 'axios';

export default class Inventory extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      inventory: []
    }
  }

  componentDidMount() {
    axios.get('https://app.subarnanto.com/api/inventory').then(res => {
      this.setState({ inventory: res.data });
      console.log({ inventory: res.data });
    });
  }

  render() {
    return this.state.inventory.map(itemList => {
      let item = itemList;
      return (
        <div>
          <h4>Nama:  { item.name } </h4>
          <h4>Nomor Seri:  { item.serial } </h4>
          <h4>ID Tag:  { item.tag } </h4>
          <img src="{ item.image }"/>
        </div>
      );
    })
  }
}

mysql reactjs node.js axios express
person Eko Andri    schedule 24.05.2018    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Вы используете неподходящий синтаксис для атрибута src. Вы должны удалить кавычки из src: Кроме того, каждый дочерний элемент массива должен иметь уникальный ключ-идентификатор. В вашем случае лучше использовать: <div key={ item.serial }>

Рабочий пример:

render() {
    return this.state.inventory.map(item => {
        return (
            <div key={ item.serial }>
                <h4>Nama:  { item.name } </h4>
                <h4>Nomor Seri:  { item.serial } </h4>
                <h4>ID Tag: { item.tag } </h4>
                <img src={ item.image } />
            </div>
        );
   })
}
person Ihor Lavs    schedule 24.05.2018

arrow_upward
0
arrow_downward

Чтобы визуализировать изображения, просто удалите двойные кавычки из тега img.

Предупреждение можно убрать, добавив свойство key к каждому элементу возвращаемого списка. Таким образом, React может обрабатывать минимальное изменение DOM. Дополнительную информацию можно найти в документации React.

import React from 'react';
import axios from 'axios';

export default class Inventory extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            inventory: []
        }
    }

    componentDidMount() {
        axios.get('https://app.subarnanto.com/api/inventory').then(res => {
            this.setState({ inventory: res.data });
            console.log({ inventory: res.data });
        });
    }

    render() {
        return this.state.inventory.map(itemList => {
            let item = itemList;
            return (
                <div key={ item.id }>
                    <h4>Nama:  { item.name } </h4>
                    <h4>Nomor Seri:  { item.serial } </h4>
                    <h4>ID Tag:  { item.tag } </h4>
                    <img src={ item.image } />
                </div>
            );
        })
      }
}
person Alberto    schedule 24.05.2018

arrow_upward
0
arrow_downward

Измените источник изображения с «{ item.image }» на src={ item.image } в виде строки.

Код:

render() {
    return this.state.inventory.map((itemList, key) => {
      let item = itemList;
      return (
        <div key={key}>
          <h4>Nama:  { item.name } </h4>
          <h4>Nomor Seri:  { item.serial } </h4>
          <h4>ID Tag:  { item.tag } </h4>
          <img src={ item.image }/>
        </div>
      );
    })
  }

Предупреждение. Каждый дочерний элемент в массиве должен иметь уникальную "ключевую" опору:

React использует ключевую опору, чтобы понять отношение компонента к элементу DOM.

person John Samuel    schedule 24.05.2018
comment
:) круто .. вы можете пометить это как правильное, если оно работает: D - person John Samuel; 24.05.2018
comment
Я не могу выбрать более одного ответа, но еще раз спасибо. - person Eko Andri; 24.05.2018

arrow_upward
0
arrow_downward

используйте ключ для тега погружения. Подробнее об этом читайте здесь в документации по реакции.

Лучший способ выбрать ключ — использовать строку, которая однозначно идентифицирует элемент списка среди его братьев и сестер. Чаще всего вы будете использовать идентификаторы из ваших данных в качестве ключей:

Документы React не рекомендуют индексы в качестве ключей, подробнее об этом здесь

export default class Inventory extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      inventory: []
    }
  }

  componentDidMount() {
    axios.get('https://app.subarnanto.com/api/inventory').then(res => {
      this.setState({ inventory: res.data });
      console.log({ inventory: res.data });
    });
  }

  render() {
    return this.state.inventory.map(itemList => {
      let item = itemList;
      return (
        <div key={item.id}>
          <h4>Nama:  { item.name } </h4>
          <h4>Nomor Seri:  { item.serial } </h4>
          <h4>ID Tag:  { item.tag } </h4>
          <img src={item.image}/>
        </div>
      );
    })
  }
}
person supra28    schedule 24.05.2018