如果表中的值不是未定义的，有没有一种方法可以有条件地呈现表中的值？

Question

我目前正在尝试开发一个表格仪表板，以供所有者查看属性列表。 而我遇到的问题是，当我尝试显示租户信息时，某些属性没有租户（JSON 中名为rentalInfo的数据是“未定义”），我正在尝试有条件地当物业确实有租户时渲染，然后我才显示租户的姓名。

这是我的表的代码：

import './table.css'
export default function Table(props){
  const properties = props.data;
  console.log(properties[4].rentalInfo[0].tenant_first_name,typeof(properties[4].rentalInfo[0].tenant_first_name))
  const fourth_tenant = properties[4].rentalInfo[0].tenant_first_name

  const rows = properties.map((row, index)=>{
    return(

      <tr>
        <th>{row.rentalInfo.tenant_first_name !== 'undefined'?fourth_tenant:"No tenant at the moment"}</th>
      </tr>
    )
  
  })
    return(
      <div>
      <table>
        <thead>
          <tr>
            <th>Tenant</th>
          </tr>
        </thead>
        <tbody>
          {rows}
        </tbody>
      </table>
    </div>
    )
  }

这是我调用表 Function 以及我的 Axios.get 调用的代码

export default function OwnerDashboard2(){
    const [dataTable, setDataTable] = useState([]);

    useEffect(() => {
        axios.get("https://t00axvabvb.execute-api.us-west-1.amazonaws.com/dev/propertiesOwner?owner_id=100-000003")
        .then(res => {setDataTable(res.data.result)})
          .catch(err => console.log(err))
      }, []);

  
    
    return(
        
        <div className="OwnerDashboard2">
                <Row>
                    <Col xs={2}><Navbar/></Col>
                    <Col>{dataTable.length!==0 && <Table data ={dataTable}/>}</Col>
                </Row>
        </div>
    )
}

我尝试使用<th>{row.rentalInfo.tenant_first_name?== 'undefined':fourth_tenant:"No tenant at the moment"}</th>但问题是它仍然显示所有属性中的唯一租户（ fourth_tenant ）对于每一列。

Answer 1

你可以用!! 将值转换为 boolean 类型

像这样：

!!row.rentalInfo.tenant_first_name ? row.rentalInfo.tenant_first_name : "tenant is undefined"