React父子组件传值显示undefined问题求助

核心问题 #

你的Card组件里根本没把Busket组件渲染到页面上——你只是在handleComplete点击事件里写了Busket的JSX代码，但这段代码没有被插入到return的DOM结构中，所以子组件从未接收到任何props，自然打印undefined。另外，setComplete是异步更新状态的，就算在事件里渲染组件，拿到的也是旧状态值。

修复步骤 #

1. 将Busket组件移到Card组件的return渲染结构中，根据complete状态决定传递的props。
2. 点击事件只负责切换状态，不用在事件里处理组件渲染。

修改后的Card组件代码 #

import React from "react";
import "./Catalog.css"
import 'macro-css';
import Busket from "../Busket/Busket"

function Card(props){
    const [complete, setComplete] = React.useState(false)

    const handleComplete = () => {
        // 只负责切换状态，组件渲染交给return里的逻辑
        setComplete(prev => !prev)
    }

    return(
        <div>
            <div className="card">
                <img width="200px" height="250px" src={props.img} />
                <h5>{props.title}</h5>
                <div className="d-flex align-center justify-between">
                    <div>
                        <p>Цена:</p>
                        <b>{props.cost}руб</b>
                    </div>
                    <button className="Catalog__btn" onClick={handleComplete}>
                        <img 
                            width='10px' 
                            height='10px' 
                            src={complete ? require("../../../images/complete.png") : require("../../../images/plus.jpg")} 
                        />
                    </button>
                </div>
            </div>
            {/* 把Busket组件放到return里，根据complete状态传参 */}
            {complete ? <Busket {...props} complete={complete}/> : <Busket />}
        </div>
    )
}

export default Card;

Busket组件优化（可选） #

可以给complete设置默认值，避免极端情况出现undefined：

import React from "react";
import "./Busket.css"
import styles from "../Main/MainContent.module.css"
import BusketCard from "./BusketCard";

function Busket({complete = false}) {
    return (
        <div className={styles.MainContent}>
            <button onClick={() => {console.log(complete)}}>+</button>
        </div>
    );
}

export default Busket;

关键说明 #

• React组件必须出现在组件return的JSX结构中才会被渲染并挂载到DOM，事件函数里的JSX不会自动生效。
• 使用setComplete(prev => !prev)的形式更新状态，能确保拿到最新的状态值，避免异步更新导致的旧值问题。

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