reactjs 从数组Map的信息未显示在表中

woobm2wo 于 2023-06-22 发布在 React

关注(0)|答案(2)|浏览(98)

我试图创建一个表，将显示信息的gpu芯片布局后，从相应的数组Map到一个表。我有麻烦得到的信息显示，即使我没有看到任何错误被抛出在控制台。任何帮助将不胜感激。

const chips = [
        {
          id: 1,
          gpuType: 'V200-32G',
          region: 'North China',
          availableGPUcount:'8',
          GPUram:'32GB',
          CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
          perGPU:'10core CPU 64G RAM',
          hardDisk:'System disk":" 20GData disk":" 100GB',
          bandwith:'U":"12MB/s D":"12MB/s',
          NAS:'Without',
          Price:1.2
        },
        {
            id: 2,
            gpuType: 'V200-32G',
            region: 'North China',
            availableGPUcount:'3',
            GPUram:'32GB',
            CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
            perGPU:'10core CPU 64G RAM',
            hardDisk:'System disk":" 20GData disk":" 100GB',
            bandwith:'U":"12MB/s D":"12MB/s',
            NAS:'Without',
            Price:1.2
          },
          {
            id: 3,
            gpuType: 'V200-32G',
            region: 'North China',
            availableGPUcount:'5',
            GPUram:'32GB',
            CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
            perGPU:'10core CPU 64G RAM',
            hardDisk:'System disk":" 20GData disk":" 100GB',
            bandwith:'U":"12MB/s D":"12MB/s',
            NAS:'Without',
            Price:1.2
          },
          {
            id: 4,
            gpuType: 'A200-32G',
            region: 'Central China',
            availableGPUcount:'8',
            GPUram:'32GB',
            CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
            perGPU:'10core CPU 64G RAM',
            hardDisk:'System disk":" 20GData disk":" 100GB',
            bandwith:'U":"12MB/s D":"12MB/s',
            NAS:'Without',
            Price:1.2
          },
          {
            id: 5,
            gpuType: 'V100-16G',
            region: 'Central China',
            availableGPUcount:'8',
            GPUram:'32GB',
            CPUmodel:'Intel(R) Xeon(R) CPU E5-2698 v4',
            perGPU:'10core CPU 64G RAM',
            hardDisk:'System disk":" 20GData disk":" 100GB',
            bandwith:'U":"12MB/s D":"12MB/s',
            NAS:'Without',
            Price:1.2
          },
]

return (
    <Main>
        <table className='table'>
            <thead>
            <tr>
                <th>GPUType</th>
                <th>Region</th>
                <th>Available GPU Count</th>
                <th>GPU Ram</th>
                <th>CPU Model</th>
                <th>Per GPU</th>
                <th>hard disk</th>
                <th>Bandwith</th>
                <th>NAS</th>
                <th>Price</th>
            </tr>
            </thead>

         <tbody>
         {chips.map((chip,index) => {
                <tr index={index}>
                    
                    <td>{chip.id}</td>
                    <td>{chip.gpuType}</td>
                    <td>{chip.region}</td>
                    <td>{chip.availableGPUcount}</td>
                    <td>{chip.GPUram}</td>
                    <td>{chip.CPUmodel}</td>
                    <td>{chip.perGPU}</td>
                    <td>{chip.hardDisk}</td>
                    <td>{chip.bandwith}</td>
                    <td>{chip.NAS}</td>
                    <td>{chip.Price}</td>
                </tr>
            })}
         </tbody>

        </table>
    </Main>
  )
}

const Main = styled.div`
    td{
        color:black;
    }
`;

我知道样式组件不是必要的，但只是想尝试一些东西之前张贴在这里
我首先添加了head和tbody，因为这些都是显示的错误，但仍然什么都没有。我还尝试使用样式化组件，以防文本由于某种原因被默认为白色

reactjs

来源：https://stackoverflow.com/questions/76526950/information-mapped-from-array-not-showing-up-on-table

2条答案

按热度按时间

mf98qq941#

所提供的代码段中存在问题。在用于呈现表行的Map函数中，箭头函数缺少return语句。要修复此问题，需要在Map函数中的JSX元素之前添加return语句。下面是正确的代码：

<tbody>
  {chips.map((chip, index) => {
    return (
      <tr key={index}>
        <td>{chip.id}</td>
        <td>{chip.gpuType}</td>
        <td>{chip.region}</td>
        <td>{chip.availableGPUcount}</td>
        <td>{chip.GPUram}</td>
        <td>{chip.CPUmodel}</td>
        <td>{chip.perGPU}</td>
        <td>{chip.hardDisk}</td>
        <td>{chip.bandwith}</td>
        <td>{chip.NAS}</td>
        <td>{chip.Price}</td>
      </tr>
    );
  })}
</tbody>

此外，我还为每个<tr>元素添加了key属性，这是在React中渲染元素列表以帮助性能优化的最佳实践。

赞(0）回复(0）举报 2023-06-22

mv1qrgav2#

Map中缺少return语句

{chips.map((chip) => {
            return (
               <tr key={chip.id}>                
                <td>{chip.id}</td>
                <td>{chip.gpuType}</td>
                <td>{chip.region}</td>
                <td>{chip.availableGPUcount}</td>
                <td>{chip.GPUram}</td>
                <td>{chip.CPUmodel}</td>
                <td>{chip.perGPU}</td>
                <td>{chip.hardDisk}</td>
                <td>{chip.bandwith}</td>
                <td>{chip.NAS}</td>
                <td>{chip.Price}</td>
               </tr>
            )
        })}

还是速记

{chips.map((chip) => (
               <tr key={chip.id}>                
                <td>{chip.id}</td>
                <td>{chip.gpuType}</td>
                <td>{chip.region}</td>
                <td>{chip.availableGPUcount}</td>
                <td>{chip.GPUram}</td>
                <td>{chip.CPUmodel}</td>
                <td>{chip.perGPU}</td>
                <td>{chip.hardDisk}</td>
                <td>{chip.bandwith}</td>
                <td>{chip.NAS}</td>
                <td>{chip.Price}</td>
               </tr>
        ))}

此外，tr标签中的索引属性不是有效的，所以它不会有用，也不是必需的，你需要添加一个带有唯一键的键属性，比如chip.id，这样react就能够检测到每个项目都是不同的。

赞(0）回复(0）举报 2023-06-22

我来回答

reactjs 从数组Map的信息未显示在表中

2条答案

相关问题

热门标签

最新问答