React没有在表上显示json

Question

我一直试图在react上以表格格式显示来自nodejs的响应数据。但由于某种原因，无论我尝试从哪个来源，我都无法呈现表或数据。所以请帮帮我。

<Select
className='SelectTeam'
closeMenuOnSelect={true}
components={animatedComponents}
isMulti={false}
options={teams}
name='team'
onChange={handleSelect}
/>
<br />
<table className='dvTable'>
<thead className='DVthead'>
<tr className='DVtr'>
<th className='DVth'>Name</th>
<th className='DVth'>Team</th>
<th className='DVth'>Preference</th>
<th className='DVth'>Taken</th>
</tr>
</thead>

{data?.map((el => {
<>
{el.team==team?
<tbody>
<tr className='DVtr' >
<td className='DVtd'> {data.name} </td>
<td className='DVtd'> {data.team} </td>
<td className='DVtd'> {data.preference} </td>
<td className='DVtd'> {data.taken} </td>
</tr>
</tbody>
:''   }
</>
}))      
} 

我axios:

const viewData = async(e) =>{
setLoading(true)
axios({
method:'get',
url: myurl,
headers: {
"Content-type": "application/json"
},
}).then(response => {
const result = response.data.rows;
console.log(result);
setData(result)
console.log(data);
console.log(data?.map(el => el.team));
})
setLoading(false)
}

结果:

(4) [{…}, {…}, {…}, {…}]
0
: 
date
: 
"2022-12-26T00:00:00.000Z"
id
: 
"69"
name
: 
"Prajwal V"
phone
: 
"990*******0"
preference
: 
"NON-VEG"
taken
: 
false
team
: 
"Greeters"
[[Prototype]]
: 
Object
1
: 
{id: '70', name: 'Amulya', phone: '636*******', preference: 'NON-VEG', team: 'Greeters', …}
2
: 
{id: '72', name: 'Murali', phone: '81********', preference: 'NON-VEG', team: 'Cleaning', …}
3
: 
{id: '74', name: 'Nimisha ', phone: '98*********', preference: 'VEG', team: 'Cleaning', …}

我想做的是显示存储在'data' if 'data中的行。team' == 'Select.team'。我希望根据用户选择的球队的选择显示行。我主要是想做一个简单的自定义过滤器。非常感谢你的帮助。

Answer 1

感谢您花时间审阅我的问题。我找到了一种渲染方法，它对我很有效。

下面是代码:

{fetched?
<>
<Select
className='SelectTeam'
closeMenuOnSelect={true}
components={animatedComponents}
isMulti={false}
options={teams}
name='team'
onChange={handleSelect}
/>
<br/>
</>:
<>
{loading ? <CircularProgress /> : 
<button type="" onClick={viewData}>Refresh</button>
}
</>}

<table className='IvTable'>
{fetched?
<thead className='IVthead'>
<tr className='IVtr'>
<th className='IVth'>Name</th>
<th className='IVth'>Team</th>
<th className='IVth'>Preference</th>
<th className='IVth'>Taken</th>
</tr>
</thead>
:''}

{data?.map((el, index) => (
<tbody>
{el.team==team ?

<tr className='IVtr' key={index}>
<td className='IVtd'> {el.name} </td>
<td className='IVtd'> {el.team} </td>
<td className='IVtd'> {el.preference} </td>
<td className='IVtd'> {el.taken} </td>
</tr>

:''   }
</tbody>
))} 

</table> 

Answer 2

映射方法中缺少返回语句交货。

Array.map((item, index) => {
return (
//write your code here 
);
})}