React+TailwindCSS表格布尔值数据不显示及格式转换问题求助

问题说明 #

正在完成学校任务，使用React.js和TailwindCSS开发数据展示表格。参考YouTube教程实现后，发现dataset.json中的布尔类型字段（gender、smoke、alco、active、cardio）无法在表格中显示，即使改为字符串类型也无效果。需求如下：

• smoke、alco等布尔值显示为对应的"true"或"false"
• gender字段为true时显示"man"，为false时显示"woman"

问题原因 #

React的JSX会自动忽略布尔值、null、undefined这类"假值"的渲染，直接写{contact.gender}或{contact.smoke}不会在页面输出任何内容，必须将其转换为字符串或通过条件渲染生成可显示的文本。

修改后的代码 #

以下是调整后的App.js核心代码，重点修改表格tbody中的字段渲染逻辑：

import React, { useState } from "react";
import "./App.css"; 
import data from "./dataset.json";

const App = () => {
  const [contacts, setContacts] = useState(data);

  return ( 
    <div className="app-container">
        <table>
            <thead>
                <tr>
                    <th>NAMA</th>
                    <th>UMUR</th>
                    <th>TINGGI</th>
                    <th>BERAT BADAN</th>
                    <th>JENIS KELAMIN</th>
                    <th>TEKANAN SISTOLE</th>
                    <th>TEKANAN DIASTOLE</th>
                    <th>TINGKAT KOLESTEROL</th>
                    <th>TINGKAT GLUKOSA</th>
                    <th>PEROKOK AKTIF/TIDAK</th>
                    <th>ALKOHOLIK/TIDAK</th>
                    <th>AKTIVITAS FISIK</th>
                    <th>RIWAYAT PENYAKIT CARDIOVASCULAR</th>
                </tr>
            </thead>
            <tbody>
              {contacts.map((contact)=> (
                <tr key={contact._id}>
                  <td>{contact.name}</td>
                  <td>{contact.age}</td>
                  <td>{contact.height}</td>
                  <td>{contact.weight}</td>
                  {/* 处理gender字段的条件渲染 */}
                  <td>{contact.gender ? 'man' : 'woman'}</td>
                  <td>{contact.ap_hi}</td>
                  <td>{contact.ap_lo}</td>
                  <td>{contact.cholestrol}</td>
                  <td>{contact.gluc}</td>
                  {/* 将布尔值转为字符串显示 */}
                  <td>{String(contact.smoke)}</td>
                  <td>{String(contact.alco)}</td>
                  <td>{String(contact.active)}</td>
                  <td>{String(contact.cardio)}</td>
                </tr>
              ))}
            </tbody>
        </table>
    </div>
    );
};

export default App;

关键修改点 #

1. gender字段处理：使用三元表达式contact.gender ? 'man' : 'woman'，根据布尔值输出对应的文本
2. 布尔字段转字符串：通过String()方法将布尔值直接转为"true"或"false"字符串，也可以用三元表达式contact.smoke ? 'true' : 'false'实现相同效果
3. 添加key属性：在map循环的<tr>标签中添加key={contact._id}，符合React列表渲染的规范，避免警告

其他说明 #

不需要修改dataset.json的字段类型，保持原有的布尔类型即可；App.css无需调整，继续使用原有样式。

内容的提问来源于stack exchange，提问作者FREDDY TANUSINA