时间戳

首页 > 解决方案 > 如何在 React 中从数组中渲染图像？

mysql - 如何在 React 中从数组中渲染图像？

问题描述

我是 React 的新手。我刚刚学会了用 nodejs 创建一个 api 并从 MySQL 中表达出来。您可以在app.subarnanto.com/api/inventory查看 json 输出 api 。

你如何渲染图像？这是我的代码。我也收到了警告

警告：数组或迭代器中的每个孩子都应该有一个唯一的“key”道具

第三个，如何改进我的代码？谢谢

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

标签： mysqlnode.jsreactjsexpressaxios

解决方案

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

推荐阅读