我正在使用axios从我的MySQL数据库中获取数据。数据获取成功,并显示在我的控制台上。但是当我使用map()函数在我的react组件中创建动态下拉菜单时,我的下拉菜单上什么也没有显示。我附上了下面的代码:
import React, {useState , useEffect} from 'react';
import Dashhome from './Dashhome';
import './inday.css';
import axios from 'axios';
function Inday()
{
const [strategy , setStrategy] = useState([]);
function rStrategies()
{
axios.get("http://localhost:3001/api/get/retrieveStrategies").then((response)=>{
setStrategy(response.data);
})
}
useEffect(()=>{
console.log(strategy.length);
console.log(strategy);
if(strategy.length < 1)
{
rStrategies();
}
})
return(
<>
<div id="indayMain">
<div id="indayLeft">
<Dashhome/>
</div>
<div id="indayRight">
<div className="indayForm">
<label htmlFor="strategy" >Strategy</label>
{
}
<select name = "strategy">
<option value = "custom">Custom</option>
{
strategy.map((element)=>{
<option key = {element.Sname} value = {element.Sname}>{element.Sname}</option>
})
}
</select>
</div>
<div className="indayForm">
<label htmlFor="trade" >Trade</label>
<select name = "trade">
<option value = "trade1">Trade 1</option>
<option value = "trade2">Trade 2</option>
<option value = "trade3">Trade 3</option>
</select>
</div>
<div className="indayForm">
<label htmlFor="index" >Index Name</label>
<select name = "index">
<option value = "Nifty" >Nifty</option>
<option value = "Bank Nifty">Bank Nifty</option>
</select>
</div>
<div className="indayForm">
<label htmlFor="tradeType" >Trade Type</label>
<select name = "tradeType">
<option value = "Buy">Buy</option>
<option value = "Sell">Sell</option>
</select>
</div>
<div className="indayForm">
<label htmlFor="strike" >Strike Price</label>
<select name = "strike">
<option value = "ATM" >ATM</option>
<option value = "OTM">OTM</option>
</select>
</div>
<div className="indayForm">
<label htmlFor="trigger">SL Trigger Points</label>
<input id = "trigger" type = "textbox" placeholder='SL Trigger Points'/>
</div>
<div className="indayForm">
<label htmlFor="percentage">Stop Loss Percentage</label>
<input id = "percentage" type = "textbox" placeholder='SL Percentage'/>
</div>
<div className="indayForm">
<label htmlFor="ce">CE Difference</label>
<input id = "ce" type = "textbox" placeholder='CE Difference'/>
</div>
<div className="indayForm">
<label htmlFor="pe">PE Difference</label>
<input id = "pe" type = "textbox" placeholder='PE Difference'/>
</div>
<div className="indayForm">
<label htmlFor="entry">Entry Time</label>
<input id = "entry" type = "textbox" placeholder='Entry Time'/>
</div>
<div className="indayForm">
<label htmlFor="exit">Exit Time</label>
<input id = "exit" type = "textbox" placeholder='Exit Time'/>
</div>
<div id="indayButtons">
<button onClick={rStrategies} id="save">Save</button>
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
</div>
</div>
</>
);
}
export default Inday;
打印数据时,您可以看到日志:
但下拉菜单未显示任何所需选项:
2条答案
按热度按时间42fyovps1#
将
return
关键字添加到map
中的<option key = {element.Sname} value = {element.Sname}>{element.Sname}</option>
之前函数
map
默认返回每个元素但如果使用{}
,则必须键入return关键字才能返回元素kdfy810k2#
你的map函数需要一个“return”。
更改为
{strategy.map((element)=>{ return <option key = {element.Sname} value = {element.Sname}>{element.Sname}</option> })}
或者将大括号替换为如下所示的括号
{strategy.map((element)=>( <option key = {element.Sname} value = {element.Sname}>{element.Sname}</option> ))}