Object.entries가 아닌 오브젝트에 대해 반복할 수 있는 올바른 방법

Object.entries가 아닌 오브젝트에 대해 반복할 수 있는 올바른 방법

사용하는 것을 좋아하지 않습니다.Object.entries(object).map((key, i)ECMAScript 7의 시험 기술이라는 것을 알게 되었고, 생산에 뭔가 문제가 있을 것 같기 때문입니다.네이티브 Javascript 대안은 없나요?

이름, 가격, 설명의 값에는 문제가 없습니다.왜냐하면 렌더링 장소를 정확하게 알고 있기 때문에 Populate를 사용하여 액세스할 수 있기 때문입니다.키입니다만, 그 특징에 대해서는, 오브젝트를 읽고, 키와 가치를 모두 렌더링 할 필요가 있습니다.

사용하려고 했습니다.Object.keys(priceChars).map(function(key, i)키와 가치를 구분하는 방법을 이해하지 못했습니다.예를 들어 퍼포먼스 500을 렌더링하고 있었는데 아이콘 클래스에 퍼포먼스 워드가 있어야 하고 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>
    );
  }
}

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

파괴 및 화살표 기능을 사용하는 최신 버전입니다.새 코드에는 이 코드를 사용합니다.

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

Object.entries(a).map(([key, value]) => {
    // Pretty straightforward - use key for the key and value for the value.
    // Just to clarify: unlike object destructuring, the parameter names don't matter here.
})

반응으로 전체 함수 렌더링

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

언급URL : https://stackoverflow.com/questions/40950546/react-js-right-way-to-iterate-over-object-instead-of-object-entries