React中如何通过回调函数传递多个值？

错误原因 #

你尝试将callback设为包含三个setter函数的数组，但在子组件TopForm中，代码把callback当作单个函数调用，导致出现TypeError: callback is not a function。数组不是函数，自然无法被调用。

解决方案 #

方案一：父组件定义统一回调函数 #

在父组件Hero中创建一个回调函数，接收日、月、年三个参数，分别更新对应的state：

import Results from "./Results";
import TopForm from "./TopForm";
import { useState } from "react";

function Hero() {
    const [dayValue, setDayValue] = useState("--");
    const [monthValue, setMonthValue] = useState("--");
    const [yearValue, setYearValue] = useState("--");

    // 统一处理日期提交的回调
    const handleDateSubmit = (day, month, year) => {
        setDayValue(day);
        setMonthValue(month);
        setYearValue(year);
    };

    return (
        <div className="font-poppins bg-light-grey p-2 h-screen w-screen">
            {/* Main Container */}
            <div className="container bg-white mt-16 max-w-[95%] md:max-w-2xl mx-auto p-10 rounded-xl rounded-br-3xl">
                <TopForm callback={handleDateSubmit} />
                <Results
                    dayValue={dayValue}
                    monthValue={monthValue}
                    yearValue={yearValue}
                />
            </div>
        </div>
    );
}

export default Hero;

子组件TopForm中的点击逻辑保持不变：

<button
    id="button"
    className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple w-16 h-16 rounded-full flex items-center justify-center hover:scale-125 transition-all"
    type="submit"
    onClick={() => callback(dayText, monthText, yearText)}
>
    <img
        src="/images/icon-arrow.svg"
        alt="arrow"
        className="w-6"
    />
</button>

方案二：合并日期状态为对象 #

把三个单独的state合并成一个对象，简化状态管理：

import Results from "./Results";
import TopForm from "./TopForm";
import { useState } from "react";

function Hero() {
    const [dateValues, setDateValues] = useState({
        day: "--",
        month: "--",
        year: "--"
    });

    const handleDateSubmit = (day, month, year) => {
        setDateValues({ day, month, year });
    };

    return (
        <div className="font-poppins bg-light-grey p-2 h-screen w-screen">
            {/* Main Container */}
            <div className="container bg-white mt-16 max-w-[95%] md:max-w-2xl mx-auto p-10 rounded-xl rounded-br-3xl">
                <TopForm callback={handleDateSubmit} />
                <Results
                    dayValue={dateValues.day}
                    monthValue={dateValues.month}
                    yearValue={dateValues.year}
                />
            </div>
        </div>
    );
}

export default Hero;

额外修复 #

注意TopForm中label的className存在语法错误，原代码：

className={`if ${error} ? "text-red-400 text-sm mb-1 uppercase tracking-wide" : "text-smokey-grey"`}

应修改为：

className={error ? "text-red-400 text-sm mb-1 uppercase tracking-wide" : "text-smokey-grey"}

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