React组件向异步函数传日期用于API调用失效问题排查

核心问题总结 #

你的代码有两处关键问题导致日期无法正确传递到API调用中：一是React组件里没有传递用户输入的日期到GetPhoto函数，二是GetPhoto函数内部修改日期后没有重新生成API请求路径。

1. ChooseDate.js的问题与修复 #

存在的问题

• 调用GetPhoto时传的是硬编码的'2022-10-17'，没有使用用户输入的日期值
• API调用时机错误：当前在输入框onChange时就调用API，而非用户点击提交按钮时触发
• 提交按钮仅设置print状态，未触发API获取数据

修复后的代码

import './ChooseDate.css'
import { useState } from "react";
import GetPhoto from '../../APIs/MarsData';

function ChooseDate() {
    const [inputDate, setInputDate] = useState(null)
    const [print, setPrint] = useState(false)
    const [photoData, setPhotoData] = useState(null) // 新增状态存储API返回数据

    // 处理输入框值变化
    function handleDateChange(val){
        setInputDate(val.target.value)
        setPrint(false) // 输入新日期时隐藏之前的结果
    }

    // 处理提交事件，调用API获取数据
    async function handleSubmit(e){
        e.preventDefault()
        if (!inputDate) return // 空日期不触发请求
        const data = await GetPhoto(inputDate)
        setPhotoData(data)
        setPrint(true)
    }

    return(
        <form onSubmit={handleSubmit}>
            <div className="App">
                {print && (
                    <div>
                        <h1>{inputDate}</h1>
                        {/* 这里可根据photoData展示图片或其他信息 */}
                    </div>
                )}
                <input type="text" onChange={handleDateChange} placeholder="YYYY-MM-DD"/>
            </div>
            <button type="submit" className='SearchButton'>提交</button>
        </form>
    )
}
export default ChooseDate;

2. MarsData.js的问题与修复 #

存在的问题

• 修改earth_date变量后，未重新计算api_call，导致API请求仍使用初始日期参数
• if (val!=null)语句未加花括号，且硬编码日期值，未使用传入的val参数
• 拼接API路径时，参数末尾的&可能导致格式问题（最后一个参数无需&）

修复后的代码

async function GetPhoto(val){
    const path = '/mars-photos/api/v1/rovers/curiosity/photos?';
    let params = [];

    // 处理日期参数
    if (val) {
        params.push(`earth_date=${val}`);
    } else {
        params.push('earth_date=2022-08-10'); // 默认日期
    }

    // 可添加其他参数，比如camera、page
    // if (camera) params.push(`camera=${camera}`);
    // if (page) params.push(`page=${page}`);

    // 拼接API密钥
    params.push(`api_key=${process.env.REACT_APP_API_KEY}`);

    // 生成完整请求路径
    const apiUrl = `https://api.nasa.gov${path}${params.join('&')}`;
    
    const response = await fetch(apiUrl);
    const data = await response.json();

    console.log(data);
    return data;
}

export default GetPhoto;

修复后的逻辑流程 #

1. 用户在输入框输入日期，handleDateChange更新inputDate状态
2. 用户点击提交按钮，handleSubmit阻止表单默认提交，调用GetPhoto并传入用户输入的日期
3. GetPhoto根据传入的日期生成正确的API请求路径，获取数据后返回
4. React组件接收返回的数据，更新photoData状态并展示结果

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