React组件中props对象数组存入state后打印为true的原因排查

API 探路者

2026-8-19

问题原因分析

useState初始化特性导致的不同步：useState的初始值仅在组件首次挂载时生效，后续props更新不会自动同步到state。如果父组件一开始给props.data的默认值是true（比如异步加载数据前的临时值），之后才将其更新为目标数组，那么组件第一次渲染时state会被初始化为true，即便后续props.data变成数组，state也不会自动跟随变化。浏览器控制台会保留所有渲染周期的日志，你看到的props.data日志可能来自更新后的渲染，而state data的日志是第一次渲染的旧值，就会出现这种矛盾的输出。
变量名冲突：检查组件内部是否有其他地方重新定义了data变量，比如后续代码中写了const data = true，此时你打印的data就不再是state中的变量，而是新定义的同名变量。
隐式类型转换（概率较低）：如果父组件传递props.data时不小心做了布尔转换（比如写成data={!!someArray}），但你当前看到的props.data日志是数组，这可能是因为日志来自不同的渲染阶段，或者控制台展开日志时数据已经更新。

解决办法

若需要state跟随props更新，使用useEffect监听props.data的变化，同步更新state：

const Slider = props => {
  console.log('props data', props.data)
  const [data, setData] = useState(props.data)
  
  useEffect(() => {
    setData(props.data)
  }, [props.data]) // 当props.data变化时触发更新
  
  console.log('state data', data)
}