Question

我不喜欢使用Object.entries(object).map((key, i)，因为我发现这是ECMAScript 7的实验技术，我觉得生产中可能出现问题。有没有本机JavaScript替代品？

我对名称，价格，描述的值没有任何问题，因为我确切地知道它们应该在哪里呈现，我可以使用Populate.key访问它们，但是对于这些特性，我需要识别对象并呈现键和值。

我尝试使用Object.keys(priceChars).map(function(key, i)，但并不了解如何将键与值分开。比如，它是渲染＆＃34;性能500＆＃34;，但我需要性能词在图标类中，500是要显示的实际值。

我的JSON结构

const Populate = {
  'name': "Product",
  'price': "1000",
  'description': "Product description",
  'characteristics': {
    'performance': '500',
    'pressure': '180',
    'engine': '4',
    'size': '860*730*1300',
    'weight': '420'
  }
}

和组件

class PriceBlock extends Component {
  render() {
    const {priceName, priceDesc, priceVal, priceChars} = this.props;
    const characteristics = Object.entries(priceChars).map((key, i) => {
      return (
        <div className="price__icon-row" key={i}>
          <i className={'ico ico-' + key[0]}></i> <span>{key[1]}</span>
        </div>
      );
    });
    return (
      <div className="col-5 price__block">
        <div className="price__name">{priceName}</div>
        <div className="price__description">{priceDesc}</div>
        <div className="price__icons">
          {characteristics}
        </div>
        <div className={ managePriceClass(priceVal) }>{priceVal}</div>
      </div>
    );
  }
}

Answer 1

a = { 
  a: 1,
  b: 2,
  c: 3
}

Object.keys(a).map(function(keyName, keyIndex) {
  // use keyName to get current key's name
  // and a[keyName] to get its value
})

Answer 2

在react中完成功能渲染

const renderbase = ({datalist}) => {
        if(datalist){
            return  Object.keys(datalist).map((item,index) => {
                return(
                  <option value={datalist[item].code} key={index}>
                      {datalist[item].symbol}
                  </option>
                )
            })
        }  
    }

Answer 3

好的，我有网格 div，我在其中显示了 firebase 分支的内容，现在它是这样的：


{this.state.orderList.map(orderData => {
                
                    
                    console.log(typeof orderData.order);
                    
                    var order = orderData.order;
                    var adress = orderData.finalFormValues;
                    
                    
                  
                    
                return(
                    <>
                    <h3>Cliente: {orderData.displayName}</h3>    
                    Horário do pedido: {orderData.horaLocal}<br />
                    {Object.values(order).map(ordersData => {

                        return(<>Sabores: {ordersData.name}<br /></>);

                    })}

                    {Object.entries(adress).map(adressData => {

                    return(<>{adressData}<br /></>);

                    })}
                    
                    
                    
                    
                    

                    </>
                );
            })}

它正在工作，但不适合项目：

page

我可以用 map() 显示订单值，但不能用地址显示。以下代码不呈现任何内容：


                    {Object.values(adress).map(adressData => {

                        return(<>Rua: {adressData.rua}<br /></>);

                    })}

它不会渲染任何东西。

我的数据库图片：

Data

React.js迭代对象而不是Object.entries的正确方法

3 个答案: