映射两个数组并在单个表中显示数据？

Question

假设我有两个数组形式的状态属性，如下所示：

constructor(props) {
    super(props);
    this.state = {
            fullNames: [],
            salaryInfo: []
        }}

...等等（我收到 props 的许多其他代码，发出 ajax 请求）

我想要完成的是循环遍历我的状态中的这两个数组并将它们显示在一个table中。

例如，很容易做这样的事情：

const employeesFormated = fullNames
        .map(item => {
        return (
        <tr>
            <td>{item}</td>
        </tr>

const salariesFormated = salaryInfo
        .map(item => {
        return (
        <tr>
            <td>{item}</td>
        </tr>

...然后将其显示在 JSX 表体中：

                   <table>
                       <thead>
                        <tr>
                            <th>Employee name</th>                        
                        </tr>
                        </thead>
                        <tbody>
                            {employeesFormated}
                        </tbody>
                    </table>

...对于工资数组/表也可以做同样的事情。通过一些额外的 CSS 技巧，也许可以将两个不同的表放置在正确的位置，但我想知道是否可以映射这两个表并将它们呈现在具有相应数据的单个表中，这意味着 =>

员工A === 工资A

Answer 1

如果状态是一个对象数组，以工资和姓名作为键，那么可能会更容易，但是如果您知道 fullNames 和工资的长度相同并且索引彼此对应（意味着索引 i 处的工资对应于姓名）在索引 i) 处，我猜你可以通过索引访问它们。

const employeeTable = this.fullNames
        .map((item, idx) => {
        return (
        <tr>
            <td>{item}</td>
            <td>{this.state.salaryInfo[idx]}</td>
        </tr>
        )
        })  

此外，当您从数组渲染时，React 希望您拥有一个唯一的 key prop 以确保可以跟踪 DOM 元素。如果您不提供索引，它会根据索引为您插入它，但不建议这样做。