如何将子索引号传递给反应组件？

Question

我的数据如下所示。

      const data = {
      main: {
        88: {
          issues: [
            {
              id: 1

            },
            {
              id: 3
            },
            {
              id: 4
            }
          ]
        }
      }
    };

我正在循环遍历data.main，然后像这样将一些数据传递给子组件。

       {Object.values(data.main).map((key) => {

         <Issues
            id={key}
            issueIndex={XXX}
            {...this.props}
          />

        }

但我也想将所有问题的索引传递给子元素。这样我就可以从这里给它编号了。

我在下面的 jsx 文件中的尝试。

   {Object.values(data.main).map((group, key) => {
    let issuesArr = group.issues;
     {issuesArr.map((value, index) => { index + 1; })}

             <Issue
                id={key}
                issueIndex={XXX}
                {...this.props}
              />

            }

我想将一个数字作为issueIndex 传递给<Issue /> 我无法控制数据结构。

Answer 1

发生这种情况是因为您的 issuesArr.map 没有做任何事情。将您的代码更改为：

{
  Object.values(data.main).map((group, key) => {
    let issuesArr = group.issues;
    {
      issuesArr.map((value, index) => {
          return (
             <Issue
               id={key}
               issueIndex={value.id}
               {...this.props}
             />
          )
       }
    }
}