React组件useState以props值为初始值为何无法正常初始化？

问题原因 #

• useState的初始值仅在组件首次挂载时生效，后续父组件传入的props.price更新时，已完成初始化的内部state不会自动同步最新的props值。
• 列表渲染该组件时未配置稳定唯一的key属性，React进行虚拟DOM diff时会错误复用旧的组件实例，旧实例中遗留的state值（你提到的10）就会被保留，不会使用新传入的props.price重新初始化state。

解决方案 #

你可以根据业务场景选择任意一种方案：

1. 修复列表渲染的key属性
   在父组件列表渲染ContentRowPrice时，给每个组件绑定唯一且稳定的key（通常用数据条目的唯一ID，不要用数组索引），触发React销毁旧组件实例、创建新实例，新实例会自动用最新的props初始化state：

// 父组件渲染示例
{dataList.map(item => (
  <ContentRowPrice 
    key={item.id} 
    id={item.id} 
    price={item.price} 
    onPaywallChange={handleChange} 
  />
))}

2. 添加props监听同步state
   如果组件需要保留内部独立状态，同时需要响应props的更新，可以加useEffect监听props.price变化，自动同步更新内部state：

import React, { useRef, useState, useEffect } from "react";

const ContentRowPrice = (props) => {
  const [priceInput, setPriceInput] = useState(props.price);
  // 新增监听逻辑
  useEffect(() => {
    setPriceInput(props.price);
  }, [props.price]);

  // 其余原有逻辑不变
}

3. 改为完全受控组件
   如果该输入组件的状态完全由父组件管理，可以直接删除内部的useState，将输入值直接绑定props.price，修改时触发父组件回调更新数据，从根源避免状态不同步问题：

const ContentRowPrice = (props) => {
  const classes = styles["contentrowprice-input"];
  return (
    <>
      <span>{props.price}</span>
      <input
        id={`paywall_${props.price}_${props.id}`}
        type="number"
        min="0"
        step="0.01"
        value={props.price}
        onChange={(e) => setPriceInput(e.target.value)}
        onBlur={() => props.onPaywallChange(parseFloat(e.target.value))}
        className={classes}
      />
  </>
);
};

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