axios 动态下拉菜单不显示任何内容ReactJS

ippsafx7  于 2022-11-05  发布在  iOS
关注(0)|答案(2)|浏览(237)

我正在使用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;

打印数据时,您可以看到日志:

但下拉菜单未显示任何所需选项:

42fyovps

42fyovps1#

return关键字添加到map中的<option key = {element.Sname} value = {element.Sname}>{element.Sname}</option>之前
函数map默认返回每个元素但如果使用{},则必须键入return关键字才能返回元素

kdfy810k

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> ))}

相关问题