React中Axios动态API路由及用户输入渲染表格的问题

修正后的完整代码 #

import React, { useState, useEffect } from 'react';
import axios from 'axios';

// 定义API返回数据的类型，替代any提升类型安全
interface CredData {
  id: string;
  // 根据实际返回的JSON结构补充字段，例如：
  name: string;
  email?: string;
}

const baseURL = "http://localhost:8080/creds";

const Demo = () => {
    const [data, setData] = useState<CredData[]>([]);
    const [input, setInput] = useState<string>("");
    
    // 将getData移到组件顶层，扩大作用域
    const getData = async (my_id: string) => {
        try {
            // 用params传递查询参数，比拼接URL更规范
            const response = await axios.get(baseURL, {
                params: { id: my_id }
            });
            setData(response.data);
            console.log("接口返回数据:", response.data);
        } catch (error) {
            console.error("数据请求失败:", error);
        }
    };

    // 可选：初始加载数据（按需启用）
    useEffect(() => {
        // getData("default-id");
    }, []);

    const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInput(e.target.value);
    };

    const handleClick = () => {
        // 增加输入校验，避免空请求
        if (input.trim()) {
            getData(input);
        }
    };

    return (
        <div>
            <input type='text' value={input} onChange={handleInput} />
            <button onClick={handleClick}>search</button>
            {/* 渲染表格示例，使用更新后的data */}
            {data.length > 0 && (
                <table border="1">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>名称</th>
                        </tr>
                    </thead>
                    <tbody>
                        {data.map(item => (
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.name}</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            )}
        </div>
    );
};

export default Demo;

问题1：handleClick中找不到getData函数 #

原因 #

getData原定义在useEffect的回调内部，作用域仅局限于该回调函数，组件其他函数无法访问。

解决方法 #

将getData移到组件顶层（Demo函数内部、useEffect外部），让整个组件的函数都能调用它。

问题2：控制台能打印数据但无法正常使用 #

原因 #

1. setState的异步性：setData是异步操作，执行后立刻打印data，此时data还是更新前的旧值，并非最新数据。
2. 未在渲染逻辑中使用data：原代码没有将data用于页面渲染，导致数据更新后无法直观看到效果。
3. any类型导致类型不安全：用any声明变量，TS无法提供类型提示，也容易引发潜在错误。

解决方法 #

1. 若要查看最新数据，要么直接打印接口返回的response.data，要么用useEffect监听data的变化：

   useEffect(() => {
       console.log("更新后的data:", data);
   }, [data]);
   

2. 在组件返回值中添加渲染逻辑（如示例中的表格），React会在data更新时自动重新渲染页面。
3. 定义数据类型（如CredData接口）替代any，提升代码的可维护性和类型安全。
4. 使用axios的params参数传递查询参数，避免直接拼接URL带来的编码问题。

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