TableCell中的reactjs条件语句

Question

如何在用于TableCell的ReactJS中输入条件if else语句。如果搜索框不返回任何内容，我希望数据表输出任何内容。

以下是代码：

export default function DataTable () {

    const [query, setQuery] = useState('') 

    const [tableData, setTableData] = useState([])

    useEffect( function () {
        const fetchUsers = async function () {
            const response = await axios.get(`/search/?query=${query}`)
            setTableData(response.data)
        }
     if (query.length === 0 || query.length > 2) fetchUsers()
    }, [query])
   
     
  return (  
    <>
      
        <input type={'text'} placeholder={'Enter Teacher ID Number....'} className='search-bar' onChange={(event) => setQuery(event.target.value)} /> 
        <TableContainer component={Paper} className='data-table'>
                <Table sx={{minWidth: 650}} aria-label='simple table'>
                    <TableHead>
                        <TableRow>
                            <TableCell className='tableCell'>ID</TableCell>
                            <TableCell className='tableCell'>Name</TableCell>
                            <TableCell className='tableCell'>Surname</TableCell>
                            <TableCell className='tableCell'>Title</TableCell>
                            <TableCell className='tableCell'>Email</TableCell>
                            <TableCell className='tableCell'>Action #1</TableCell>
                            <TableCell className='tableCell'>Action #2</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                    { tableData.map((data) => (
                            <TableRow key={data.id} sx={{ '&:last-child td, &:last-child th': {border:0}}}>
                                <TableCell className='tableCell'> { data.id }</TableCell>
                                <TableCell className='tableCell'> { data.name }</TableCell>
                                <TableCell className='tableCell'> { data.surname }</TableCell>
                                <TableCell className='tableCell'> { data.title }</TableCell>
                                <TableCell className='tableCell'> { data.email}</TableCell>
                                <TableCell className='tableCell'>
                                    <button className={'verify'}>
                                        <Link to={`/search/${data.id}`} className={'verify'} state={data}>Verify</Link>
                                    </button>
                                </TableCell>
                                <TableCell className='tableCell'>
                                    <button className={`drop`}>
                                        <Link to={`/drop/${data.id}`} className={'drop'} state={data}>Drop</Link>
                                    </button>
                                </TableCell>
                            </TableRow>
                         ))}
                    </TableBody>
                </Table>
            </TableContainer>

    </>
    )
}

我试着输入三元操作符'?‘但是它返回第一个结果。

Answer 1

首先，我建议您将映射的行分离到单独的组件中，以便于处理，并使代码更具可读性。此组件可能位于其他文件中。

另一方面，我强烈建议如果您正在使用来自rest服务的数据，则使用反应查询。。

export default function DataTable () {

    const [query, setQuery] = useState('') 

    const [tableData, setTableData] = useState([])

    useEffect( function () {
        const fetchUsers = async function () {
            const response = await axios.get(`/search/?query=${query}`)
            setTableData(response.data)
        }
     if (query.length === 0 || query.length > 2) fetchUsers()
    }, [query])

    function UserTableRow(user){
        return (
            <TableRow key={user.id} sx={{ '&:last-child td, &:last-child th': {border:0}}}>
                <TableCell className='tableCell'> { user.id }</TableCell>
                <TableCell className='tableCell'> { user.name }</TableCell>
                <TableCell className='tableCell'> { user.surname }</TableCell>
                <TableCell className='tableCell'> { user.title }</TableCell>
                <TableCell className='tableCell'> { user.email}</TableCell>
                <TableCell className='tableCell'>
                    <button className={'verify'}>
                        <Link to={`/search/${user.id}`} className={'verify'} state={data}>Verify</Link>
                    </button>
                </TableCell>
                <TableCell className='tableCell'>
                    <button className={`drop`}>
                        <Link to={`/drop/${user.id}`} className={'drop'} state={data}>Drop</Link>
                    </button>
                </TableCell>
            </TableRow>
        )
    }
   
     
  return (  
    <>
      
        <input type={'text'} placeholder={'Enter Teacher ID Number....'} className='search-bar' onChange={(event) => setQuery(event.target.value)} /> 
        <TableContainer component={Paper} className='data-table'>
            <Table sx={{minWidth: 650}} aria-label='simple table'>
                <TableHead>
                    <TableRow>
                        <TableCell className='tableCell'>ID</TableCell>
                        <TableCell className='tableCell'>Name</TableCell>
                        <TableCell className='tableCell'>Surname</TableCell>
                        <TableCell className='tableCell'>Title</TableCell>
                        <TableCell className='tableCell'>Email</TableCell>
                        <TableCell className='tableCell'>Action #1</TableCell>
                        <TableCell className='tableCell'>Action #2</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                { tableData?.map((user) => <UserTableRow user={user}/>)}
                {!tableData.length && <div>No results found.</div>}
                </TableBody>
            </Table>
        </TableContainer>
    </>
    )
}