如何将useState初始值设为组件props值？Context取值undefined排查

我尝试在HomeCard组件中把props.title设置为useState()的初始值，但在OrderBody组件的控制台中打印card变量时一直得到undefined。注：我使用Context API在HomeCard组件和OrderBody组件间共享信息，且连接配置无误。

HomeCard组件代码 #

import { useState, createContext} from 'react';
import './HomeCard.css';

//context api
export const CardContext = createContext();

function HomeCard(props){

  const [card, setCard] = useState(props.title);
  
  return(
    <CardContext.Provider value={{card}}>
      {props.children}
      <div className="card">
        <div className="card-body">
          <img src={props.img} width={250} height={220} className="card-img"/>
          <h2 className="card-title">{props.title}</h2>
          <p className="card-description">{props.description}</p>
        </div>
        <button className="card-btn">Add to Cart</button>
      </div>
    </CardContext.Provider>
  )
}

export default HomeCard;

OrderBody组件代码 #

import { useContext } from "react";//importing useContext
import { CardContext } from "../../HomeFolder/HomeCardFolder/HomeCardFolder/HomeCard";//importing card context

import './OrderBody.css'

function OrderBody(){

  const {card} = useContext(CardContext);
  console.log(card)

  return (
    <div className="OrderBodyContainer">
        <h6>order list</h6>
    </div>
  )
}

export default OrderBody;

问题原因及解决办法 #

核心问题：组件不在Context作用域内 #

Context的Provider只会对**它包裹的子组件（即{props.children}）**提供上下文数据。如果OrderBody组件不是作为HomeCard的子元素使用的，它就不在Provider的覆盖范围内，此时useContext(CardContext)会拿到Context的默认值（undefined）。

解决步骤： #

1. 调整组件嵌套结构：确保OrderBody是HomeCard的子组件，使用方式如下：

// 在父组件中这样使用
<HomeCard title="你的标题" img="图片地址" description="描述内容">
  <OrderBody />
</HomeCard>

2. 验证props.title的有效性：在HomeCard组件内部先打印console.log(props.title)，确认传入的title是否存在有效值。如果props.title本身就是undefined，那useState的初始值自然也是undefined。

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