Bagaimana cara merender gambar dari array di React?

Saya baru mengenal Bereaksi. Saya baru belajar membuat api dengan nodejs dan mengekspresikan dari MySQL. Anda dapat melihat api keluaran json di app.subarnanto.com/api/inventory.

Bagaimana cara merender gambar? Ini kode saya. Saya juga mendapat peringatan

Peringatan: Setiap anak dalam array atau iterator harus memiliki prop "kunci" yang unik

Dan yang ketiga, bagaimana cara meningkatkan kode saya? Terima kasih

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 sumber

Jawaban (4)


arrow_upward
1
arrow_downward

Anda menggunakan sintaksis yang tidak pantas untuk atribut src. Anda harus menghapus tanda kutip dari src: Selain itu, setiap anak dari array harus memiliki kunci pengenal unik. Dalam kasus Anda, lebih baik menggunakan: <div key={ item.serial }>

Contoh kerja:

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

Untuk merender gambar cukup hapus tanda kutip ganda dari tag img.

Peringatan dapat dihapus dengan menambahkan properti key ke setiap elemen daftar yang dikembalikan. Dengan cara ini React dapat menangani perubahan DOM yang minimal. Terdapat informasi lebih lanjut di dokumentasi 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

Ubah sumber gambar dari "{ item.image }" menjadi src={ item.image } sebagai string.

Kode:

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>
      );
    })
  }

Sebagai peringatan - Setiap anak dalam array harus memiliki prop "kunci" yang unik:

React menggunakan key prop untuk memahami hubungan komponen-ke-Elemen DOM.

person John Samuel    schedule 24.05.2018
comment
:) luar biasa.. Anda dapat menandainya sebagai benar jika berhasil :D - person John Samuel; 24.05.2018
comment
Saya tidak dapat memilih lebih dari 1 jawaban tetapi sekali lagi terima kasih. - person Eko Andri; 24.05.2018

arrow_upward
0
arrow_downward

gunakan kunci untuk tag menyelam. Baca selengkapnya tentang hal ini di sini di dokumen reaksi.

Cara terbaik untuk memilih kunci adalah dengan menggunakan string yang secara unik mengidentifikasi item daftar di antara saudaranya. Paling sering Anda akan menggunakan ID dari data Anda sebagai kunci:

Dokumen React tidak merekomendasikan indeks sebagai kunci lebih lanjut di sini

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