显示JSON服务器响应中的项目

Question

我从服务器返回了这个JSON：

[
{
"symbol":"one option"
},
{
"symbol":"second option"
}
.......
]

我尝试使用将数据显示到下拉列表中

<Select value={props.selectedData}>
{props.availableData.map((option) => (
<option value={option.symbol}>{option.symbol}</option>
))}
</Select>

但如果列表为空。显示数据的正确方式是什么？

Answer 1

您只需要将双向的三元运算符条件

1.

{
props.availableData ?
<Select                            
value={props.selectedData}>
{props.availableData.map((option) => (
<option value={option.symbol}>{option.symbol}</option>
))}
</Select>:null
}

{
props.availableData.length === 0 ?
<Select                            
value={props.selectedData}>
{props.availableData.map((option) => (
<option value={option.symbol}>{option.symbol}</option>
))}
</Select>:null  
}