ReactJS动态下拉菜单无内容显示问题求助

问题原因 #

• map函数未返回JSX元素：你在strategy.map中使用大括号{}包裹逻辑，但没有显式返回<option>元素。箭头函数用大括号时必须写return，否则默认返回undefined，导致下拉菜单无法生成对应选项。
• useEffect缺少依赖数组：当前useEffect未设置依赖项，会在组件每次渲染时重复执行，引发不必要的请求和渲染，虽不影响数据获取，但属于不良实践。

修改后的代码 #

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(() => {
        if (strategy.length < 1) {
            rStrategies();
        }
    }, [strategy]); // 添加依赖数组，仅在strategy变化时执行

    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>
                            {/* 用小括号实现箭头函数隐式返回JSX */}
                            {
                                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;

关键修改说明 #

1. 修复map返回逻辑：

   • 将strategy.map((element)=>{ ... })改为strategy.map((element)=>( ... ))，通过小括号实现箭头函数的隐式返回，无需手动写return。
   • 也可以选择在大括号内显式添加return：

     strategy.map((element)=>{
         return <option key={element.Sname} value={element.Sname}>{element.Sname}</option>
     })
     

2. 修正useEffect依赖：

   • 为useEffect添加依赖数组[strategy]，确保仅当strategy状态变化时才执行effect逻辑，避免无效重复请求。

内容的提问来源于stack exchange，提问作者Adam Saleem