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

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

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

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

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

…等等（我收到道具、发出ajax请求的许多其他代码）

我试图完成的是循环我所在状态下的这两个数组，并将它们显示在一个表中

例如，这样做很容易：

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

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

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

const employeesFormated=全名
.map（项目=>{
返回(
{item}
const SalariesFormatted=salaryInfo
.map（项目=>{
返回(
{item}

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

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

员工姓名
{雇员格式}

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

---

员工A===Salary A

如果状态是一个对象数组，以Salary和name作为键，可能会更容易，但如果您知道全名和Salary长度相同，并且索引彼此对应（即索引i处的薪资对应于索引i处的name），我想你可以通过索引访问它们

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

const employeeTable=this.fullNames
.map（（项目，idx）=>{
返回(
{item}
{this.state.salaryInfo[idx]}
)
})  

---

另外，当您从数组进行渲染时，React希望您拥有一个唯一的键道具，以确保可以跟踪DOM元素。如果您不提供索引，它将根据索引为您插入该属性，但不建议这样做。

如果状态是一个对象数组，以salary和name作为键，则可能更容易，但如果您同时知道全名和全名工资的长度是相同的，并且指数之间相互对应（意味着指数i处的工资对应于指数i处的名称），我猜您可以通过指数访问它们

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

const employeeTable=this.fullNames
.map（（项目，idx）=>{
返回(
{item}
{this.state.salaryInfo[idx]}
)
})  

---

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

为什么不使employees对象处于您的状态？为什么不使employees对象处于您的状态？因为数据以一种新的方式传入所有员工都被正确呈现，工资也以正确的顺序显示在控制台中，但当我尝试您向我展示的方式时，它只呈现第一个

中的最后一份工资……您肯定让我走上了正确的道路，但这并不完全正确：/n请再分享一些代码。不确定为什么只显示最后一份ng rendered-您的控制台在哪里？记录它？在render方法中？错误在于我的API调用，您在这里完全回答了我的问题。谢谢。@由于数据正在传入，所有员工的渲染都正确，工资也在控制台中以正确的顺序显示，但当我尝试使用您向我展示的方式时，它只显示了正确的顺序第一个

中的最后一份薪水……你肯定让我走上了正确的道路，但这不完全是：/那么请再分享一些代码。不确定为什么只渲染最后一份-以及你的控制台在哪里。记录它？在渲染方法中？错误在于我的API调用，你完全回答了我的问题。谢谢。@A投标