React中如何利用Axios的GET请求响应更新对象类型的状态变量？

兄弟，我看了你写的代码，发现几个影响状态正常更新的小问题，咱们一步步来梳理和修正：

先说说代码里的几个小坑： #

• Axios回调参数写错了：你在第一个.then()里直接写(response.data)是不对的，得先接收完整的response对象，再从中提取data属性才行。
• 连续调用setState会覆盖状态：你的state是个对象，每次调用setState如果只传部分属性，会把其他属性给覆盖掉（比如你先更新bookingData，再更新infoMessage，第一次的更新会被第二次的空对象冲掉），而且setState是异步的，连续调用很容易出问题。
• 错误处理用错方法了：Axios的错误捕获得用.catch()，第二个.then()是用来处理前一个then的返回值的，不是抓错误的哦。
• 渲染时没做空值判断：如果bookingData还是null的时候直接访问state.bookingData.id，页面会直接报错，得先判断数据是否存在再渲染。

给你修正后的完整代码： #

import { useState } from 'react';
import axios from 'axios';

const BookingQuery = () => {
    const [state, setState] = useState({
        bookingId: '', // 输入框里的预订ID
        bookingData: null, // Axios返回的预订数据
        infoMessage: ''
    })

    const onSubmit = (event) => {
        event.preventDefault();

        // 提交前先清空旧数据和提示，避免混淆
        setState(prev => ({ ...prev, bookingData: null, infoMessage: '' }));

        axios.get(`${url}${state.bookingId}`)
            .then((response) => {
                console.log(response.data);
                // 合并原有状态，只更新需要修改的属性
                setState(prev => ({
                    ...prev,
                    bookingData: response.data
                }));
            })
            .catch((error) => {
                console.error('请求出错啦:', error);
                setState(prev => ({
                    ...prev,
                    bookingData: null,
                    infoMessage: `${prev.bookingId} Not Found`
                }));
            });
    }

    return (
        <div>
            <form onSubmit={onSubmit}>
                <input 
                    type="text"
                    value={state.bookingId}
                    onChange={(e) => setState(prev => ({ ...prev, bookingId: e.target.value }))}
                    placeholder="请输入预订ID"
                />
                <button type="submit">查询预订</button>
            </form>

            {/* 显示提示信息 */}
            {state.infoMessage && <p style={{color: 'red'}}>{state.infoMessage}</p>}

            {/* 确保有数据再渲染表格，避免报错 */}
            {state.bookingData && (
                <table border="1">
                    <tr>
                        <td>预订ID</td>
                        <td>邮箱</td>
                    </tr>
                    <tr>
                        <td>{state.bookingData.id}</td>
                        <td>{state.bookingData.emailId}</td>
                    </tr>
                </table>
            )}
        </div>
    )
}

export default BookingQuery;

额外说明几个关键点： #

• 用...prev展开原有状态，这样不会丢失bookingId这类不需要更新的属性；
• 用setState(prev => ...)的函数式更新，能确保拿到最新的状态值，避免异步更新导致的状态不一致；
• 渲染表格前先判断state.bookingData是否存在，彻底避免空指针报错；
• 提交前清空旧状态，让用户能清晰看到新的查询结果。

备注：内容来源于stack exchange，提问作者Viknesh k m