React 组件未显示动态下拉建议

Question

我正在开发一个名为 CadastroPacienteBiopsia 的 React 组件，用于注册患者和活检。该组件具有一项功能，当用户在文本输入字段中键入内容时，它会动态搜索专业人员。虽然搜索功能有效（状态会正确更新获取的数据和日志），但不会显示下拉建议。

这是我组件的相关部分：

import React, { useState, useEffect } from 'react'
import axios from 'axios';
import './formulario_design.css'

function CadastroPacienteBiopsia({ onFormSubmit }) {
    // ... (state and other functions)

    const [profissionais, setProfissionais] = useState([]);
    const [textoBusca, setTextoBusca] = useState('');

    useEffect(() => {
        const buscarProfissionais = async () => {
            if (textoBusca.length > 2) {
                try {
                    const resposta = await axios.get(`http://localhost:5000/api/profissionais/nome/${textoBusca}`);
                    setProfissionais(resposta.data);
                } catch (erro) {
                    console.error('Erro ao buscar profissionais', erro);
                }
            }
        };

        const timerId = setTimeout(buscarProfissionais, 500); // Debounce
        return () => clearTimeout(timerId);
    }, [textoBusca]);

    // ... (other parts of the component)

    return (
        <div className="formulario-cadastro">
            {/* Other form fields */}
            <input
                type="text"
                name="profissional_nome"
                placeholder="Digite o nome de um profissional existente"
                value={dadosPaciente.profissional_nome}
                onChange={(e) => {
                    handleInputChange(e);
                    setTextoBusca(e.target.value);
                }}
                list="profissionais-list"
            />
            <datalist id="profissionais-list">
                {profissionais.map((profissional, index) => (
                    <option key={index} value={profissional.nome} />
                ))}
            </datalist>
            {/* Other form fields */}
        </div>
    );
}

export default CadastroPacienteBiopsia;

在 profissional_nome 字段中输入时，状态 profissional 会按预期更新，并且控制台日志会确认获取的数据。但是，与此输入字段关联的下拉列表（ID 为“profissionais-list”的数据列表）不会显示基于获取的数据的建议。

如何在用户在“Digite o nome de um profissional Existente”字段中键入内容时显示下拉建议？

为了解决我的 React 组件 CadastroPacienteBiopsia 的问题，我实现了一项功能，可以在用户在文本字段中键入内容时在下拉列表中动态显示专业建议。尽管通过控制台日志确认了成功的数据获取和状态更新，但通过数据列表标签链接的下拉列表并未显示这些建议。我使用 useState 来管理状态，使用 useEffect 来触发专业搜索，并添加了去抖功能以提高效率。核心挑战仍然是：下拉列表没有反映动态加载的数据。

Answer 1

datalist

是您制作的自定义组件吗？

如果是的话

请分享代码

如果没有

尝试使用

ul

和

li

元素列出项目，如下所示：

 {profissionais.length > 0 && (
    <ul className="suggestions-list">
      {profissionais.map((profissional, index) => (
        <li key={index} onClick={() => handleSuggestionClick(profissional.nome)}>
          {profissional.nome}
        </li>
      ))}
    </ul>
  )}