主页 / 问题 / 1496939
Accepted
Anton Buketov
Asked:2023-02-16 23:58:27 +0000 UTC2023-02-16 23:58:27 +0000 UTC

REACT 组件不是在循环中创建的

  • 772

上一部分返回 REACT 问题中的循环。

现在我可以像这样访问workers对象的每个属性：

workers[item][item2].firstName

根据这些数据，我想制作与TableRow条目一样多的组件。

    {isReady && Object.keys(workers).map(item =>{
      // console.log(workers[item])
      Object.keys(workers[item]).map(item2 =>{
        console.log(workers[item][item2].job_name)
        {
        <TableRow
          firstName={workers[item][item2].firstName}
          lastName={workers[item][item2].lastName}
          job_name={workers[item][item2].job_name}
          hourly_rates = {workers[item][item2].hourly_rates}
          fixed_fee={workers[item][item2].fixed_fee}
        />
      }
      })
    })
  }

工人自己存储什么： 在此处输入图像描述

或文本：

{
    "data": [
        {
            "workerid": 2,
            "firstName": "Vladimir",
            "lastName": "Moskalev",
            "ratesid": "mnt",
            "idrates": 1,
            "job_name": "mentor",
            "hourly_rates": "7",
            "fixed_fee": "0",
            "jobcode": "mnt"
        },
        {
            "workerid": 1,
            "firstName": "Anton",
            "lastName": "Buketov",
            "ratesid": "mnt",
            "idrates": 1,
            "job_name": "mentor",
            "hourly_rates": "7",
            "fixed_fee": "0",
            "jobcode": "mnt"
        }
    ]
}

但什么也没发生

成分TableRow

import React from 'react'

const TableRow = ({firstName,lastName,job_name,hourly_rates,fixed_fee}) => {
  return (
    <tr>
      <td>{ firstName } { lastName }</td>
      <td>{ job_name }</td>
      <td>{ hourly_rates }</td>
      <td>{ fixed_fee }</td>
    </tr>
    
  )
}

export default TableRow
javascript

2 个回答

  1. Best Answer

    你的渲染应该是这样的：

    {isReady && workers?.data?.map(item => (
    <TableRow
      firstName={item.firstName}
      lastName={item.lastName}
      job_name={item.job_name}
      hourly_rates={item.hourly_rates}
      fixed_fee={item.fixed_fee}
    />
  )
}

    您立即访问workers.data（检查是否存在）并调用map方法，因为 数据是一个数组。

    • 2

  2. 在您的工作人员中，一个对象落入其中，数组由数据键定位，因此您需要像这样将其拉出：

    workers.data.map(item =>{

    另外，要从函数返回一个组件，你需要return，它将返回括号中的组件

    • 1

相关问题