Question

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

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

... etc（很多其他代码，我收到道具，发出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技巧可能会使两个不同的表放在正确的位置，但是我想知道是否可以映射两者并将它们渲染到具有相应数据的单个表中，这意味着=＆gt;

员工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希望您拥有唯一的密钥支柱，以确保可以跟踪DOM元素。如果您不提供索引，它会根据索引为您插入，但不建议这样做。

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

1 个答案: