จะแสดงรูปภาพจากอาร์เรย์ใน React ได้อย่างไร

คุณใช้ไวยากรณ์ที่ไม่เหมาะสมสำหรับแอตทริบิวต์ 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>
        );
   })
}

หากต้องการแสดงภาพ เพียงลบเครื่องหมายคำพูดคู่ออกจากแท็ก img

คำเตือนสามารถลบออกได้ โดยเพิ่มคุณสมบัติ key ลงในแต่ละองค์ประกอบของรายการที่ส่งคืน วิธีนี้ React สามารถจัดการกับการเปลี่ยนแปลง DOM ขั้นต่ำได้ ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบการตอบกลับ

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

เปลี่ยนแหล่งที่มาของรูปภาพจาก "{ 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

ใช้กุญแจสำหรับแท็กดำน้ำ อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่ในเอกสารโต้ตอบ

วิธีที่ดีที่สุดในการเลือกคีย์คือการใช้สตริงที่ระบุรายการระหว่างพี่น้องโดยไม่ซ้ำกัน ส่วนใหญ่แล้วคุณจะใช้ ID จากข้อมูลของคุณเป็นกุญแจ:

เอกสาร 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>
      );
    })
  }
}