如何计算子对象的数量并将计算的索引传递给子对象？

Question

我的数据如下所示

  team1 : {
         author92 : "John" , 
         author43 : "Smith" 
        },
  team2 : {
         author33 : "Dolly", 
         author23 : "Mark" 
        },

我希望按如下所示按组显示作者，但无论团队如何，都添加作者计数器

第 1 组
1、约翰
2、史密斯
第 2 组
3、多莉
4、马克

我现在的显示是这样的

第 1 组
1、约翰
2、史密斯
第 2 组
1、多莉
2、马克

我无法控制数据的结构，但我首先要遍历团队并将数据传递给 React 应用程序中的组件。

{Object.values(data).map((key) => {
   return ( 
     <p>Group <span>{key + 1}</span></p>
     <Team authorCounter={} />
    )
}

我的团队组件会循环显示帖子并显示作者

  const author = Object.keys(data.team1).map((key) => {
  return {
    <b>{key + 1}.</b> }

我想知道如何传递相互叠加的作者数量，以便我可以开始在子组件中对作者进行编号。

Answer 1

适合您的工作代码。如果不需要状态，可以使用函数式组件。

https://jsfiddle.net/sfr7hmf3/

const obj = {
  team1 : {
    author92 : "John" , 
    author43 : "Smith" 
  },
  team2 : {
    author33 : "Dolly", 
    author23 : "Mark" 
  },
};

class App extends React.Component {
  render() {
    const teams = [];
    let teamNum = 1;
    let authorsStartWith = 1;

    Object.keys(obj).forEach(key => {
      teams.push({
        team: obj[key],
        teamNum,
        authorsStartWith,
      });
      teamNum += 1;
      authorsStartWith += Object.keys(obj[key]).length;
    });

    return (
      <div>
        {
          teams.map(team =>
            <Team
              team={team.team}
              teamNum={team.teamNum}
              authorsStartWith={team.authorsStartWith}
              key={team.teamNum}
            />
          )
        }
      </div>
    )
  }
}


class Team extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>Group {this.props.teamNum}</p>
        <ol start={this.props.authorsStartWith}>
          {
            Object.values(this.props.team)
              .map(authorName =>
                    <li
                    key={`${this.props.groupName}_${authorName}`}
                  >
                    {authorName}
                  </li>)
          }
        </ol>
      </div>
    );
  }
}

Answer 2

由于您的组件的数据不处于可用状态，我建议您先将数据映射到可用状态，然后预先计算索引。

这可能会给排序和反转带来问题，但这会建议您需要将映射移动到 GroupContainer 组件而不是它之外

const data = { 
  team1 : {
         author92 : "John" , 
         author43 : "Smith" 
        },
  team2 : {
         author33 : "Dolly", 
         author23 : "Mark" 
        }
};

const Member = ({ member }) => {
  return <p>{ member.index}, { member.name }</p>;
};

const Group = ({ index, teams }) => {
  return <div><p>Group { index }</p>{ teams.map( team => <Member member={team} /> ) }</div>;
};

class GroupContainer extends React.Component {
  render() {
    let counter = 0, childCounter = 0;
    let { data } = this.props;
    return <div>{ data.map( group => <Group {...group} /> ) }</div>;
  }
}

function mapData( data, childCount = 0 ) {
  return Object.keys( data ).map( (group, index) => {
    let obj = data[group];
    return {
      index: index + 1,
      name: group,
      teams: Object.keys( obj ).map( author => ({
        index: ++childCount,
        name: obj[author]
      }) )
    };
  });
}

ReactDOM.render( <GroupContainer data={ mapData( data ) } />, document.querySelector('#app') );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">
</div>

Answer 3

您可以在使用 increment operator ++ 时对计数和增量使用闭包。