React下拉选择后innerHTML显示[object Promise]/[object Object]而非接口数据问题

• 直接操作DOM违反React设计原则：handleChange中通过document.getElementById("show")修改innerHTML，脱离了React状态驱动渲染的机制，是渲染异常的核心诱因
• 未处理异步返回的Promise：fetchPerson是async异步函数，调用后直接返回Promise对象，未等待请求完成就将返回值拼接进HTML字符串，最终渲染的是Promise的字符串化结果
• 接口地址格式错误：axios.get和fetch的请求地址前多了单引号，即"'http://localhost:8000/..."，会导致请求解析失败
• Promise错误处理逻辑失效：fetchPersons中用逗号分隔的错误回调不属于Promise的捕获链路，异常无法被正常处理
• 数据取值逻辑不匹配接口结构：fetchPerson中硬取result.data，但列表接口使用了hydra:member的API平台结构，单条接口返回结构未做适配，可能拿到空值

1. 移除直接操作DOM的逻辑，所有渲染数据完全由组件state驱动
2. 统一处理异步请求，等待接口返回后再更新state
3. 修复接口地址的多余单引号，补全Promise错误捕获链路
4. 从state中读取选中的人员数据直接在JSX中渲染，不再手动拼接HTML字符串

import React from 'react';
import axios from "axios";
import Select from "../../components/forms/Select";

class Persons extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            isLoaded: false,
            persons: [],
            selectedPerson: {}, // 存储选中的单条人员数据
            selectedPersonId: '' // 存储下拉框选中的ID
        };
    }

    // 修复接口地址多余单引号，补全错误捕获
    fetchPersons() {
        return axios.get("http://localhost:8000/api/persons")
            .then((result) => {
                this.setState({
                    isLoaded: true,
                    persons: result.data["hydra:member"]
                })
            })
            .catch((error) => {
                this.setState({
                    isLoaded: true,
                    error
                })
            })
    }

    // 修复接口地址多余单引号，适配接口返回结构
    async fetchPerson(id) {
        try {
            const res = await fetch(`http://localhost:8000/api/persons/${id}`)
            const result = await res.json()
            // 根据实际接口返回结构调整取值，兼容hydra平台结构
            this.setState({
                selectedPerson: result["hydra:member"] ?? result.data ?? result
            })
        } catch(error) {
            this.setState({ error })
        }
    }

    componentDidMount() {
        this.fetchPersons();
    }

    // 移除DOM操作，异步等待请求完成后直接更新state
    handleChange = async (event) => {
        const selectedId = event.target.value;
        this.setState({ selectedPersonId: selectedId })
        // 选中空值时清空已选数据
        if (!selectedId) {
            this.setState({ selectedPerson: {} })
            return
        }
        await this.fetchPerson(selectedId)
    }

    render() {
        const { error, isLoaded, persons, selectedPerson, selectedPersonId } = this.state;
        if (error) {
            return <div>Erreur : {error.message}</div>;
        } else if (!isLoaded) {
            return <div>Chargement…</div>;
        } else {
            return (
                <div>
                    <h1>Test</h1>
                    <Select 
                        id="selectPerson" 
                        name="persons"  
                        label="Persons" 
                        value={selectedPersonId} 
                        onChange={this.handleChange}
                    >
                        <option key={0} value={null}>Choice</option>
                        {persons.map(person => (
                            <option key={person.id} value={person.id}>{person.ref} </option>
                        ))}
                    </Select>

                    {/* 直接从state读取选中数据渲染，无拼接HTML逻辑 */}
                    {selectedPerson.id && (
                        <div className="selected-person-info">
                            <p>你选中的人员信息：</p>
                            <p>姓：{selectedPerson.lname}</p>
                            <p>名：{selectedPerson.fname}</p>
                            <p>性别：{selectedPerson.sexe}</p>
                            <p>年龄：{selectedPerson.age}</p>
                        </div>
                    )}

                    <table>
                        <tbody>
                            {persons.map(person => (
                                <tr key={person.id}>
                                    <td>{person.lname}</td>
                                    <td>{person.fname}</td>
                                    <td>{person.sexe}</td>
                                    <td>{person.age}</td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            )
        }
    }
};

export default Persons;

• 类组件中使用箭头函数定义事件处理函数时，不需要再手动bind(this)，原代码中onChange={this.handleChange.bind(this)}属于冗余代码
• 异步请求必须等待Promise resolve后再使用返回值，否则拿到的是未完成的Promise对象，字符串化后会显示[object Promise]
• React中优先使用state驱动渲染，不要直接操作DOM，否则容易出现状态不同步、渲染异常的问题

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