React中如何为复选框传递两个参数？状态更新失效求助

核心问题分析 #

1. 字段大小写不匹配：传递价格参数时用了item.price，但后端返回的数据字段是item.Price（大写P），导致传入handleChange的p为undefined，无法正常更新price状态。
2. 复选框状态判断错误：e.target.unchecked不是合法属性，应该用!e.target.checked判断复选框是否未选中。
3. 状态初始化缺失：price和specOrder未设置默认值，初始状态为undefined，可能引发渲染异常。

修改后的完整代码 #

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

function SpecialtyBurgers() {
    // 给状态设置默认值，避免undefined
    const [price, setPrice] = useState(0.0);
    const [specOrder, setSpecOrder] = useState("");

    const [specBurgers, setSpecBurgers] = useState([]);
    
    useEffect(() => {
        axios.get('http://localhost:8800/specialtyburgers')
        .then(res => {
            setSpecBurgers(res.data);
        })
    }, [])

    function handleChange(p, e) {
        if(e.target.checked) {
            setSpecOrder(e.target.value);
            setPrice(p);
            // 若需传递最新状态给父组件，直接用当前的e.target.value和p（setState是异步的，状态变量还未更新）
            // this.props.handleSpec(e.target.value, p);
        }
        // 修正未选中判断逻辑
        else if(!e.target.checked){
            setSpecOrder("");
            setPrice(0.0);
            // this.props.handleSpec("", 0.0);
        }
    }

    const specBurgerDetails = specBurgers.map( (item, index) => {
        return(
            <div className="item" key={index}> {/* 建议用item的唯一ID作为key，如item.id（若后端返回），提升渲染稳定性 */}
                <h2>{item.SpecBurgerType}</h2>
                <p>{item.Protein}</p>
                <p>{item.Toppings}</p>
                <p>{item.Price}</p>
                {/* 修正参数为item.Price（大写P） */}
                <input type='checkbox' value={item.SpecBurgerType} onChange={(e) => handleChange(item.Price, e)}/>
                <p>{specOrder}</p>
                <p>{price}</p>
            </div>
        )
    })

    return <div>{specBurgerDetails}</div>;
}

export default SpecialtyBurgers;

额外优化建议 #

• 避免用index作为map元素的key，如果后端返回汉堡的唯一标识（如item.id），用它作为key能避免组件重渲染时的异常。
• setState是异步操作，若要在状态更新后立刻传递最新值给父组件，直接使用当前的参数值（如e.target.value、p）而非状态变量。

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