如何从 React 中的数组渲染图像？答案

【问题标题】：How to render an image from an array in React?如何从 React 中的数组渲染图像？
【发布时间】：2018-11-03 09:37:22
【问题描述】：

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

【问题讨论】：

标签： mysql node.js reactjs express axios

【解决方案1】：

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

【讨论】：

【解决方案2】：

要渲染图像，只需删除 img 标记中的双引号即可。

可以通过将key 属性添加到返回列表的每个元素来删除警告。这种方式 React 可以处理最小的 DOM 更改。 React documentation 有更多信息。

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

【讨论】：

【解决方案3】：

将图像源从“{ 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 使用 key prop 来理解组件与 DOM 元素的关系。

【讨论】：

:) 太棒了.. 如果它有效，您可以将其标记为正确：D
我只能选择 1 个答案，但再次感谢您。

【解决方案4】：

使用一个键作为潜水标签。在反应文档中阅读更多关于它的信息here。

选择键的最佳方法是使用一个字符串，该字符串在其兄弟项中唯一标识一个列表项。大多数情况下，您会使用数据中的 ID 作为键：

React 文档不建议将索引作为键更多 here

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

【讨论】：