尝试使用嵌套对象数据循环对象并使用我卡中的数据进行渲染

Question

Example Link

我正在尝试遍历一个内部有嵌套对象的对象，以便我可以使用这些值。

该对象可以在下面代码区域中的我的状态中找到。我需要使用以下内容，以便我可以在我的卡中使用它，如下所示render()

我使用了来自 lodash 的 _.mapValues，我能够将 color 和 avg 数据分开，但是我无法访问 avg 数据以便我可以使用它。

注意：平均数据中的键总是在变化，所以我不能使用正常的方式来访问数据：

例如，value.avg[key] 这给了我undefined

请检查此Example Link 以进一步理解我的意思，并在示例中检查一次控制台

我需要在我的卡中使用的数据才能呈现
- 颜色名称“红色”
- 来自 avg 对象的值

    this.state = {
      example: {
        red: {
          avg: {
            "1514505600": 3,
            "1514509200": 20,
            "1514512740": 15,
            "1514516280": 26
          }
        },
        green: {
          avg: {
            "1514505600": 51,
            "1514509200": 315,
            "1514512740": 36,
            "1514516280": 34
          }
        },
        blue: {
          avg: {
            "1514505600": 1,
            "1514509200": 16,
            "1514512740": 14,
            "1514516280": 17
          }
        }
      }
    }

    render() {
      const data = this.state.example;

      _.mapValues(data, function(value, key, object) {
        console.log(value.avg);
        console.log(key);
      });

      const card = (
        <div>
          <span style={{ fontWeight: "bold" }}>Please check the results in the console for more info</span>

        <div>
          <div>Colour name here: </div>
          <div>Example > avg > value data here: </div>
        </div>
      </div>
    )

    return <div>
      {card}
    </div>
  }

Example Link

Answer 1

我相信这就是您想要做的，请参阅CodePen 上的示例

我做了一些更改，见下文： 我创建了generateCard 方法并在渲染方法中调用它。

...
generateCard = (data) => {
    const keys = Object.keys(data); // Get array of keys from object

    return keys.map((key, index) => {
      const avgKeys = Object.keys(data[key].avg);

      return (
        <div key={index}>
          <div>Colour name: {key} </div>
          {avgKeys &&
            avgKeys.map(avgKey => {
              return <div key={avgKey}>Example > avg > value data: {avgKey} </div>
            })
          }
      </div>
      )
    })
  }

render() {
    const { example } = this.state;

    const card = (
      <div>
        <span style={{ fontWeight: "bold" }}>
          Please check the results in the console for more info
        </span>

        {this.generateCard(example)}
      </div>
    );

    return <div>{card}</div>;
  }
  ...

Answer 2

1。创建一个生成卡片的函数。

function generateCard(color, value) {
  return (
    <div key={color+'_'+value}> // arrays need a key to keep them unique
      // your card JSX here
      // use {color} and {value} where necessary
    </div>
  )
}

2。循环访问您的数据。

要访问数组中的数据，您可以使用Object.keys(object) 从对象返回一个键数组，然后使用该数组访问对象的数据或使用像 lodash 这样的库简化语言。

var object = { key1: 'value1', key2: 'value2', key3: 'value3' }
var keys = Object.keys(object) // --> ['key1', 'key2', 'key3']
keys.forEach(function(key) {
  // key is the key (i.e. 'key1')
  // object[key] is the value (i.e. 'value1')
}

// or, with lodash:

var object = { key1: 'value1', key2: 'value2', key3: 'value3' }
_.forIn(object, function(value, key) {
  // do something with the key and/or value
})

由于您的数据在对象中包含一个对象，因此您需要使用此模式两次。一次是 data.example，一次是 value.avg。

3。把它绑在一起

var myCards = [] // array for storing cards

_.forIn(exampleData, function (avgData, color) {
  // do something with the key and/or value
  // avgData is {avg: { ... }}
  // color is the color
  _.forIn(avgData.avg, function (value, key) {
    // do something with the key and/or value
    // store your card from here
    myCards.push(generateCard(color, value))
  })
})

render() {
  <div>
    {myCards}
  </div>
}