javascript - React Component 的状态用 .unshift() 渲染很奇怪，但是用 .push() 渲染正常

Question

我有一个数组，我有 2 个组件(子项和父项)。我在父组件中遍历数组，渲染子组件，我用数组中的数据为它们提供 Prop 。

子组件将它们的 props 转换为状态，然后递增和递减该状态。

父组件可以将新项添加到数组中并重新渲染。但。如果我在数组前面取消 shift() 新项目，我会将数组中的最后一项添加到屏幕上，而不是将新项目添加到前面。

问题:为什么用 .push() 渲染效果好，用 .unshift() 渲染效果差。此外，concat 和 [newItem, ...oldArray] 一切正常，但是当我在数组前面添加项目时，同样的事情不好吗？还有如何正确地 .unshift() 新项目(评论、计数器、图像、帖子，例如任何东西)进入状态，以便它们首先呈现？

PS:我所做的任何事情(concat、slice、...array、unshift、react 的不变性助手)似乎都无法正常工作。 Mobx 和 Redux 没有帮助。

PS: Mithril 、Inferno 和 Aurelia 也会出现这种情况。

import React from 'react'
import {render} from 'react-dom'
var Component = React.Component

var data = [0, 12, -10, 1, 0, 1]

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            counter: data
        }
        this.addCounter = this.addCounter.bind(this)
    }
    addCounter(e){
        let newArr = [1, ...this.state.counter]
        this.setState({
            counter: newArr
        })
    }
    render() {
        if(this.state.counter){
            return (
                <div>
                    <button onClick={this.addCounter}>add counter</button>
                    {this.state.counter.map(e=>{
                        return(
                            <Counter count={e}/>
                        )
                    })}
                </div>
            )
        } else {
            return(
                <div>loading...</div>
            )
        }
    }
}

class Counter extends Component {
    constructor(props) {
        super(props)
        this.state = {
            count: this.props.count
        }
        this.increment = this.increment.bind(this)
        this.decrement = this.decrement.bind(this)
    }
    increment(e){
        this.setState({count: this.state.count + 1})
    }
    decrement(e){
        this.setState({count: this.state.count - 1})
    }
    render() {
        return (
            <span>
                <b onClick={this.increment}>+</b>
                <i>{this.state.count}</i>
                <b onClick={this.decrement}>-</b>
            </span>
        )
    }
}

render(<App/>, document.getElementById('root'))

Answer 1

主要问题不是您将项目添加到数组的方式，而是您在呈现子组件时没有提供键。

当您呈现初始数组时会发生什么，子组件会在数组中的每个项目中实例化一次。但是，React 无法将数组中的值映射到这些实例。

让我们将第一个实例称为 A。当您添加到您的列表并再次渲染时，第一个子实例(在由您的 this.state.counter.map 生成的数组中)仍将是实例 A，只是带有属性设置为新值。您可以通过例如在您 child 的渲染方法中记录 this.props.e 来验证这一点。在添加新项目之前，第一个记录的值应与添加的值相对应。

由于您的子组件是有状态的，并且不会做任何事情来处理 componentWillReceiveProps，因此更改 e 属性不会做任何事情来改变每个实例的先前状态。

它在附加时起作用的原因是因为已经存在的实例仍将与计数器数组中的项目一对一映射，并且新项目将呈现为 Counter 的新实例。

例如，如果您要重新排列柜台中元素的顺序，您会遇到同样的问题。生成的子实例不会改变顺序。

因此，解决方案是为每个项目提供唯一的 Counter 键。由于您的元素没有内在标识，我的建议是放置一个

let currentId = 0

在您的 App 组件之上，让计数器数组中的每个项目成为 {value, id: currentId++} 的对象，然后将 id 作为键传递给 Counter。