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

Question

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

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

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

我想要完成的是循环遍历我所在州的这两个数组，并将它们显示在一个一个表中。

例如，这样做很容易：

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

如果 state 是一个对象数组，以salary 和 name 作为键，可能会更容易，但是如果你知道 fullNames 和salary 的长度相同，并且索引从一个到另一个对应（意味着索引 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 元素可以被跟踪。如果您不提供，它将根据索引为您插入，但不建议这样做。