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

Question

我的数据如下所示。

＆＃13;

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

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

        }

＆＃13;

＆＃13;

＆＃13;

但我也希望将所有问题的索引传递给子元素。所以我可以从这里编号。

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

＆＃13;

＆＃13;

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

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

            }

＆＃13;

＆＃13;

＆＃13;

我想将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}
             />
          )
       }
    }
}