React组件CadastroPacienteBiopsia下拉建议不显示求助

开发用于患者和活检登记的React组件CadastroPacienteBiopsia时，实现了输入框动态搜索专业人员的功能：输入内容时能正常调用接口获取数据并更新profissionais状态，但绑定的datalist下拉建议始终无法显示。相关代码如下：

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;

1. 替换不稳定的key值 #

不要用index作为option的key，改用专业人员的唯一标识（比如profissional.id）。React依赖key判断组件是否需要重新渲染，index会在数组元素顺序变化时失效，导致option不更新：

<datalist id="profissionais-list">
    {profissionais.map((profissional) => (
        <option key={profissional.id} value={profissional.nome} />
    ))}
</datalist>

2. 同步输入框状态与搜索文本 #

输入框的value绑定的是dadosPaciente.profissional_nome，而搜索用的是textoBusca，两者可能不同步。建议在handleInputChange中同时更新textoBusca，或者统一状态：

onChange={(e) => {
    const value = e.target.value;
    handleInputChange(e);
    setTextoBusca(value);
}}

3. 清空短文本时的搜索结果 #

当输入文本长度小于3时，清空profissionais数组，避免残留旧数据干扰：

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);
            }
        } else {
            setProfissionais([]); // 清空结果
        }
    };

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

4. 检查CSS样式干扰 #

查看formulario_design.css中是否有隐藏datalist或option的样式，比如display: none、visibility: hidden等，确保datalist能正常显示。

5. 验证浏览器兼容性 #

部分旧浏览器对datalist的支持有限，建议在现代浏览器（Chrome、Firefox、Edge）中测试，确保功能正常。

内容的提问来源于stack exchange，提问作者Thales Pardini