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

Question

Я новичок в 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>
      );
    })
  }
}

Answer 1

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

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

В документах 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>
      );
    })
  }
}

Answer 2

Измените источник изображения с "{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 использует ключевую подпорку для понимания компонента-отношение элемента to-DOM.

Answer 3

Чтобы отобразить изображения, просто удалите двойные кавычки из тега 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>
            );
        })
      }
}

Answer 4

Вы используете неподходящий синтаксис для атрибута 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>
        );
   })
}