Reactjs 传入道具的数组显示为空

我不能对这种行为耿耿于怀。在应用程序组件的控制台日志消息中，arr按预期显示为一个包含2个元素的数组。但是，当它传递给ChildComponent时，它显示为空数组。如果我不直接在口袋妖怪阵列上使用splice，而是先将其扩展到一个新阵列，然后在该阵列上使用splice，那么效果很好

很明显，这是因为splice直接更改了数组，这违反了不可变的React规则，但我不明白当pokemon数组不是传递给子组件的内容时，这有什么关系

const pokemon = [
  {
    name: 'pikachu'
  },
  {
    name: 'raichu'
  }
]

export default function App() {
  const arr = pokemon.splice(0,2)
  console.log(arr)
  return (
    <div className="App">
      <ChildComponent example={arr} />
    </div>
  );
}

const ChildComponent = (props) => {
  console.log(props);
  return (
    <div>
      hi
    </div>
  )
}

const口袋妖怪=[
{
姓名：“皮卡丘”
},
{
姓名：'raichu'
}
]
导出默认函数App（）{
常数arr=口袋妖怪拼接（0,2）
控制台日志（arr）
返回(
);
}
常量ChildComponent=（道具）=>{
控制台日志（道具）；
返回(
你好
)
}

您面对这种奇怪行为的真正原因是，您的代码

应用程序

包装了两次组件

Splice at首先返回移除的项目，然后pokemon在第一次拼接后没有剩余项目<代码>arr打印这些删除项目。因为您的应用程序使用

StrictMode

（应用程序再次执行）包装，所以pokemon（现在是一个空数组）再次拼接，并且Child有一个空数组打印一个空数组

---

如果删除

StrictMode

wrap，代码将按预期运行，并且

console.log

将正确打印。

就是这样。正如您所说，没有StrictMode，它的功能与预期一样。是否预期应用程序组件上的console.log仅在第一次渲染时执行？它是否也应该在第二次渲染时执行，在一个空数组拼接之后执行，并产生一个空“arr”数组的额外日志消息？发现这一点可以解释它。“结果表明React正在劫持console.log，并将其替换为在第二次渲染过程中不执行任何操作的函数”