React中父组件向PizzaBlock传递props失效，原因是什么？

你遇到的props传递未生效的核心原因是：PizzaBlock组件虽然接收了外部传入的title和price props，但完全没有在内部逻辑和渲染中使用这些值，而是始终渲染自身state里的固定披萨数据。

关键遗漏点 #

1. PizzaBlock组件的state是硬编码的固定数据，完全忽略了外部传入的props
2. 渲染PizzaItemBlock时，传递的是state里的item对象，而非外部传入的props值

修改方案 #

根据你的需求，有两种常见的修改方式：

方式1：直接使用props渲染（无需state，仅展示静态数据）

如果PizzaBlock不需要修改披萨数据，直接把传入的props传递给PizzaItemBlock即可：

const PizzaBlock = ({ 
  title = 'Вегатарианская', 
  price = '499р', 
  id = '1' 
}) => {
    return (
        <div className="pizza-block">
            <img
                className="pizza-block__image"
                src="https://dodopizza-a.akamaihd.net/static/Img/Products/Pizza/ru-RU/b750f576-4a83-48e6-a283-5a8efb68c35d.jpg"
                alt="Pizza"
            />
            <PizzaItemBlock title={title} price={price} id={id}/>
        </div>
    )
}

方式2：用props初始化state（支持后续修改数据）

如果需要在PizzaBlock内部修改披萨数据，可以用传入的props来初始化state：

const PizzaBlock = (props) => {
    const [pizzaItem, setPizzaItem] = useState([{
        title: props.title || 'Вегатарианская',
        price: props.price || '499р',
        id: props.id || '1'
    }]);
   
    return (
        <div className="pizza-block">
            <img
                className="pizza-block__image"
                src="https://dodopizza-a.akamaihd.net/static/Img/Products/Pizza/ru-RU/b750f576-4a83-48e6-a283-5a8efb68c35d.jpg"
                alt="Pizza"
            />
            {pizzaItem.map((item) => (
                <PizzaItemBlock key={item.id} {...item}/>
            ))}
        </div>
    )
}

修改后，Categories组件中传入的title="Мексиканская"和price="500"就会正常生效，未传props的<PizzaBlock/>会使用默认值渲染素食披萨。

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