如何从react中的数组渲染图像?

xeufq47z  于 2021-06-21  发布在  Mysql
关注(0)|答案(4)|浏览(363)

我还没有React过来。我刚刚学会了用nodejs和mysql中的express创建api。您可以在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>
      );
    })
  }
}
2q5ifsrm

2q5ifsrm1#

使用潜水标签的钥匙。请在react docs中阅读更多信息。
选择键的最佳方法是使用一个字符串来唯一地标识同级列表项。通常,您会使用数据中的ID作为键:
react docs不建议将索引作为键更多地放在这里

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

f2uvfpb92#

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

yrwegjxp

yrwegjxp3#

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

j0pj023g4#

要渲染图像,只需从中删除双引号 img 标签。
通过添加 key 属性设置为返回列表的每个元素。这种方法可以处理最小的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>
            );
        })
      }
}

相关问题