在React中將物件渲染到表中

我是 React 初學者，在將物件渲染到表格時遇到了麻煩。我可以使用 console.log 訪問 ctx 物件，但無法在表中的瀏覽器上顯示它。如果有人可以幫助我，請給我你的建議。代碼如下。

目標是將物件（ctx）中的資料顯示到表中。

function AllData(){
const ctx = {users:[{name:'john', email:'[email protected]', passwords:'password'},{name:'smith', email:'[email protected]', passwords:'password']};
const userdata = ctx.users.map((user)=>{    
    (
    <tr>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.password}</td>
    </tr>
    )
});

return (
  
         <table className="table">
             <thead>
                 <tr>
                    <th scope="col">Name</th>
                    <th scope="col">Email</th>
                    <th scope="col">Password</th>
                 </tr>
             </thead>
             <tbody>
                {userdata}
             </tbody>
         </table>
     )}

uj5u.com熱心網友回復：

.map你需要從類似的地方回傳一些東西

const userdata = ctx.users.map((user) => {
    return (
        <tr key={user.name}>
            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>{user.password}</td>
        </tr>
    )
});

甚至只是

const userdata = ctx.users.map((user) => (
    <tr key={user.name}>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.password}</td>
    </tr>
));

另一種選擇是

return (
    <table className="table">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th scope="col">Password</th>
            </tr>
        </thead>
        <tbody>
            {
                ctx.users.map((user) => (
                    <tr key={user.name}>
                        <td>{user.name}</td>
                        <td>{user.email}</td>
                        <td>{user.password}</td>
                    </tr>
                ))
            }
        </tbody>
    </table>
)

還添加了key屬性，因為您使用的是陣列。

uj5u.com熱心網友回復：

return在里面添加map

const userdata = ctx.users.map((user)=>{    
    return (
    <tr>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.password}</td>
    </tr>
    )
});

uj5u.com熱心網友回復：

您的代碼存在幾個問題，主要問題是您在其中使用的函式.map沒有return任何作用。

其他問題：

• }的定義中缺失ctx。
• 屬性名稱不匹配：passwordsvs password。
• keymap 函式回傳的 JSX 元素中不存在任何屬性。

以下是修復了所有這些問題的可運行示例。

function AllData() {
  const ctx = {
    users: [
      { name: 'john', email: '[email protected]', password: 'password' },
      { name: 'smith', email: '[email protected]', password: 'password' }
    ]
  };

  const userdata = ctx.users.map((user)=>{
    return (
      <tr key={user.name}>
        <td>{user.name}</td>
        <td>{user.email}</td>
        <td>{user.password}</td>
      </tr>
    )
  });

  return (
     <table className="table">
         <thead>
             <tr>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
                <th scope="col">Password</th>
             </tr>
         </thead>
         <tbody>
            {userdata}
         </tbody>
     </table>
  )
}
ReactDOM.render(<AllData />, document.getElementById('react'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="react"></div>

標籤：javascript 反应 html表

上一篇：如何縮短多個if陳述句（不是ifelse）

下一篇：在動態鍵上設定嵌套動態鍵