这个问题更多的是为了更多地了解反应如何处理和对变化做出反应，而不是实现，因此我让 immutable-props-apprach 稍微发展一下。
我试图获取数组的第一个元素并将其从原始数组中删除，该数组作为道具传递给组件：
const ChildComponent = ( arrayToChange: Array[] ) => { const elementFromArray = arrayToChange.shift(); }
从shift()方法的定义来看::
shift() 方法从数组中删除第一个元素并返回该删除的元素。此方法更改数组的长度。
尽管 elementFromArray 变量现在包含数组中的元素，但数组是完整的，它没有受到任何影响，仍然包含所有元素。
但这怎么可能呢？ React 应该通过引用传递 props，因此原始数组应该受到影响。如果 React 采取了一些保护措施，并且这些更改不会反映在父级中，我会理解，但是，我仍然希望更改能够反映在子级中。 我找不到任何有用的东西来解释这种行为，大多数资源只提到了 props 的不可变方法以及如何找到解决方法，而不是其背后的原因或逻辑。
尽管 elementFromArray 变量现在包含数组中的元素，但数组是完整的，它没有受到任何影响，并且仍然包含所有元素。但是，如果我使用 Push() 方法，则会反映更改，arrayToChange 会多包含一个元素。
我的问题是 - 为什么 arrayToChange 对这些方法的反应不同？如果shift()不改变内容，我希望push()也不会。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
2
1078
收藏
我不完全确定这个问题是什么，但我在这里冒险猜测一下，所以请在这里发表评论，我会在投票之前进行更改。
我认为你应该在你的子组件中尝试这个：
然后使用“data”映射到 jsx 中的输出
然后在父组件中，对 arrayToChange 进行移位。您可以将 useEffect 视为一个“观察者”，当数组长度发生变化时它将触发。