Реакция: не удалось отобразить значения в объекте - PullRequest
Новая
       14

Реакция: не удалось отобразить значения в объекте

0 голосов
/ 08 февраля 2020

У меня есть компонент, определенный как показано ниже. creativeList содержит значения, которые меня интересуют. Он содержит следующее: 

creativeList = [{keyID: "AC072", cost: 1461, people: 520, cpp: "2.81"}, 
{keyID: "AC098", cost: 1600, people: 470, cpp: "3.4"}]

Я хотел бы иметь возможность отображать keyID, возвращая его в моем компоненте. Я могу получить значение, войдя в консоль, однако я не могу его вернуть. Кто-нибудь может мне помочь? 

function DisplayList(props) {
    const creativeList = props.creativeList

    function ret(){
        creativeList.forEach(function(item){
            const i = item[0]

            console.log(i.keyID)

            return (
                <li>{i.keyID}</li>
            );
        })
    }

    return (
        <div>
            <li>List:</li>
            {ret()}
        </div>
    );
}

export default DisplayList;

Ответы [ 4 ]

4 голосов
/ 08 февраля 2020

Добавьте оператор возврата непосредственно перед оператором forEach и замените forEach на map

map возвращает массив элементов, возвращаемых его параметром обратного вызова, в отличие от forEach.

forEach возвращает неопределенное значение, поэтому ваш список не печатается. 

function ret(){
        return creativeList.map(function(item){

            console.log(item.keyID)

            return (
                <li>{item.keyID}</li>
            );
        })
    }
2 голосов
/ 08 февраля 2020

Нет способа остановить forEach, если вы хотите сделать return, forEach возвращает undefined, используйте вместо этого карту. рабочий пример: песочница

2 голосов
/ 08 февраля 2020

Попробуйте это. Вы пропустили возврат компонента и, конечно, вы должны использовать карту вместо foreach 

import React from "react";

function DisplayList(props) {
  const creativeList = props.creativeList;


  function ret() {
    return creativeList.map(function(item) {
      const i = item;

      console.log(i.keyID);

      return <li>{i.keyID}</li>;
    });
  }

  return (
    <div>
      <li>List:</li>
      {ret()}
    </div>
  );
}

export default DisplayList;
1 голос
/ 08 февраля 2020

Вы можете упростить использование map. Также добавьте атрибут key к каждому элементу в списке. 

function DisplayList(props) {
  const { creativeList = [] } = props.creativeList;
  return (
    <div>
      <div>List:</div>
      {creativeList.map(({ keyID }) => (
        <li key={keyID}>{keyID}</li>
      ))}
    </div>
  );
}
export default DisplayList;
...