时间戳

首页 > 解决方案 > 在 reactjs 中渲染表的数据头

reactjs - 在 reactjs 中渲染表的数据头

问题描述

我可以通过例如渲染herader的表用户：{user[name]}。但我无法渲染标题本身，例如渲染：Leanne Graham 的名字是 [name]。谁能帮我这个？

 import React from 'react'

        const Users= ({ users}) => {
           return (
                 <div>
                    {users.map((user,index) => (
                       <div key={index}> 
                          <div className="container smcontainer d-flex justify-content-start"> 
                             <div className="row">
                             <div className="col-md-12">
                                <table className="table table-striped">
                                         <thead>

                                         </thead>
                                      <tbody>
                                         <tr>
                                            <td className=""> {user['id']} </td>  
                                            <td className=""> {user['name']} </td>  
                                            <td className=""> {user['username']} </td>  
                                            <td className=""> {user['email']} </td>   
                                         </tr>
                                      </tbody>
                                </table> 
                             </div> 
                          </div> 
                       </div>
                       </div>
                    ))}   
                 </div>
           )}
        export default Products

这是 App 组件

 class App extends Component {
      constructor(props){
        super(props)
          this.state= {
            users: [], 
        } 
      }
        async componentDidMount() {
              const url = ('https://jsonplaceholder.typicode.com/users')
              const response = await fetch (url)
              const data = await response.json() 
              this.setState({users: data.itemsList})
              console.log({users: data.itemsList})        
                 }

          render() {
            return (
              <Users users = {this.state.users} />
            )
          }
      }
    export default App;

标签： reactjsapi

解决方案

当您map遍历数组时，每次返回的内容都会为数组中的每个元素返回。此代码将为每个用户创建一个全新的表。

我认为您想要做的是将列标题与 map 调用分开定义，然后映射到数组以生成行：

const columns = ["ID", "Name", "Username", "Email"];

...

<div>
        <div className="container smcontainer d-flex justify-content-start"> 
           <div className="row">
            <div className="col-md-12">
               <table className="table table-striped">
                 <thead>
                    {columns.map(c => <th>{c}</th>)}
                 </thead>
                 <tbody>
                    {users.map((user, index) => (
                       <tr>
                         <td className=""> {user['id']} </td>  
                         <td className=""> {user['name']} </td>  
                         <td className=""> {user['username']} </td>  
                         <td className=""> {user['email']} </td>   
                       </tr>
                   ))}
                 </tbody>                 
                </table> 
            </div> 
          </div>
        </div>
      </div>

我做了一个 Codepen 来演示这两种方式，但对我来说，第一个更有意义。

推荐阅读