React函数组件中如何通过Props模拟数据？赋值报错求解

嘿，你遇到的问题核心在于直接修改组件的props是React不允许的——props是父组件传递给子组件的只读数据，组件内部不能直接覆盖或修改props对象，这就是你报错的原因。下面给你两种正确的模拟数据方式，以及如何渲染这些数据：

一、正确的模拟数据写法 #

方式1：函数参数解构+默认值（推荐，ES6+写法） #

直接在函数参数里给props设置默认值，这样当父组件没有传递对应props时，就会自动使用你定义的模拟数据：

function MyComponent({ history = {}, data = [
  { name: 'XYZ' },
  { name: 'ABC' }
] }) {
  // 这里可以直接使用解构后的history和data变量
  return (
    <div>
      {/* 遍历渲染模拟数据里的名称 */}
      {data.map((item, index) => (
        <div key={index}>名称：{item.name}</div>
      ))}
    </div>
  )
}

方式2：使用defaultProps（兼容旧版本React） #

如果你的项目还在使用较低版本的React，可以在组件外部定义默认props：

function MyComponent(props) {
  return (
    <div>
      {/* 通过props.data访问模拟数据 */}
      {props.data.map((item, index) => (
        <div key={index}>名称：{item.name}</div>
      ))}
    </div>
  )
}

// 给组件设置默认props
MyComponent.defaultProps = {
  history: {},
  data: [
    { name: 'XYZ' },
    { name: 'ABC' }
  ]
}

二、为什么之前的写法错误？ #

React遵循单向数据流原则，props是父组件向子组件传递数据的通道，子组件只能读取props，不能修改它。你直接在组件内部写props = {...}相当于强行覆盖了这个只读对象，违反了React的设计规范，所以会抛出错误。

三、后续替换为真实Store数据 #

等API就绪、Store里有真实数据后，只需要在父组件调用MyComponent时传递真实的data和history props即可：

// 父组件中从Store获取真实数据后传递
<MyComponent history={realHistory} data={realDataFromStore} />

这时候组件会自动使用父组件传递的真实数据，默认的模拟数据就会被覆盖，完全不用修改组件内部的逻辑。

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