下拉项的onclick函数（从mysql接收数据）答案

【问题标题】：onclick function for dropdown items(which is received data from mysql)下拉项的onclick函数（从mysql接收数据）
【发布时间】：2021-12-06 00:20:46
【问题描述】：

大家好，我创建了一个下拉列表并从表中获取数据。我想要实现的是当用户从下拉列表中单击数据时我想在页面下显示选定的表数据以便更好地理解我在下面上传图片（我使用 NodeJS 作为后端并响应显示和 MySQL 保存）

在这里你可以看到它在数据集下存储图像 URL 的数据集。我使用“从 new_schema.images 中选择不同的数据集”命令消除重复项所以我的下拉列表显示如下

所以当用户单击一个下拉项时，它会显示上表中上传的图像的路径，所以请帮助我实现这一目标

这是反应代码

import React,{useState,useEffect} from "react";

import "../Login.css";
import axios from 'axios'
import Dropdown from 'react-bootstrap/Dropdown'
import Select from "react-select";
import 'bootstrap'
export default function Inference() {
  const [data,setData] = useState([]);
  const [folder,setFolder] = useState([]);
  const fetchData = () => {
    const api = 'http://localhost:5000/files'
    const Folapi = 'http://localhost:5000/db'
    const getData = axios.get(api)
    const getFol = axios.get(Folapi)
    
    axios.all([getData]).then(
        axios.spread((...allData) => {
            const getvix1 = allData[0].data
            
            setData(getvix1)
          
        })
    )
    axios.all([getFol]).then(
      axios.spread((...allData) => {
        
          const getFol1 = allData[0].data
       
          setFolder(getFol1)
      })
  )

}
useEffect(() => {
  fetchData()
  const interval=setInterval(()=>{
      fetchData()
     },1000000000)
     return()=>clearInterval(interval)
}, [])
  return (
    <div className="container-fluid mt-5">
    <div className="row">
      <div className="col-12"style={{paddingBottom:"100px"}}>
   <Dropdown>
  <Dropdown.Toggle variant="success" id="dropdown-basic">
    Dropdown Button
  </Dropdown.Toggle>

  <Dropdown.Menu>
  {folder.map(data =>
    <Dropdown.Item href="#">{data.dataset}</Dropdown.Item>
  )}
  </Dropdown.Menu>
</Dropdown>
</div>

    {data.map(data => <div className="col-2">
      <div className="card mb-3 border-0 p-0">
                              <img src={`${data.path}`} height="80" className="card-img-top img-responsive" alt="img"/>
                              
                              </div></div>
    
    
    
    
    )}
</div>
    </div>
  );
}

【问题讨论】：

好的，您可以在 useEffect 中获取调用，将结果保持为数组的状态，并将显示设置为 false 的另一个状态。当 display 设置为 true 并映射下拉项目时，您可以有条件地呈现该下拉列表
@Nacho bro 请给我一些代码示例。我是新手
您需要提供一些代码和上下文。否则这是一个非常笼统的问题。
@AshotN 代码更新先生请帮帮我

标签： javascript mysql node.js reactjs

【解决方案1】：

正如您在评论中建议的那样，我在这里举一个可能对您有所帮助的示例：

import React, { useState, useEffect } from "react";

import Icon from "components/Icon";
/**Styles */
import "./dropdown.scss";

const Dropdown = () => {

    const [listItems, setListItems] = useState([])
    const [isDisplayed, setDisplayed] = useState(false);

useEffect(() => {
 ....here the axios fetch and setState from listitems... setListItems(...)
},[])

    const toggleDropdown = () => {
        setDisplayed(!isDisplayed);
    };

    return (
        <div className={"dropdown__wrapper"}>
            <div className="dropDown__button__wrapper">
                <div
                    className="dropdown__button"
                    onClick={() => toggleDropdown()}
                    data-testid="dropdown__selected-test"
                >
                 
                        <span>DropDown header name</span>
                  
                </div>
                <span className="dropdown__arrow">
                    <Icon name="chevron-down" />
                </span>
            </div>
            {isDisplayed && (
                <ul className="dropdown__list">
                    {listItems.length > 0
                        ? listItems.map((item, index) => {
                              return (
                                  <li
                                      key={index}
                                      onClick={() => {
                                          setDisplayed(false); 
                                          onClick(item.value);
                                      }}
                                  >
                                      {item.name}
                                  </li>
                              );
                          })
                        : {"title when its empty"}
                </ul>
            )}
        </div>
    );
};


export default Dropdown;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：